<p><code></p> <p>图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echarts.</p> <p>1,确定你需要引入的echarts版本,官网地址:<a href="http://echarts.baidu.com/index.html" rel="nofollow noreferrer" target="_blank">http://echarts.baidu.com/inde...</a><br />2,npm或者cnpm安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" cnpm install echarts --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;"> cnpm <span class="hljs-keyword">install</span> echarts <span class="hljs-comment">--save</span></code></pre> <p>3,按需引入。这里我强烈推荐按需引入,echarts图类型众多,我们一般不需要将每个图表都引入,这样也有利于减少打包体积,这里我建议将每一个echarts图封装成一个组件。<br />主要代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<el-col :span='24'><br /> <v-charts></v-charts><br /> </el-col>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">el-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">'24'</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">v-charts</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">v-charts</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-col</span>&gt;</span></code></pre> <p>4组件部分源码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;line&quot;> <div class=&quot;main&quot; ref=&quot;main&quot;> </div> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> echarts = require('echarts/lib/echarts');//引入echarts require('echarts/lib/chart/bar'); //引入柱状图 // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title');</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{ data(){ return{ myChart:{} } }, mounted(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.initEcharts(); }, methods:{ initEcharts(){ <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> THIS=<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>; <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> mainDiv = THIS.$refs.main; //找到绘制的区域,强烈推荐使用refs var myChart = echarts.init(mainDiv); //初始化 myChart.setOption({ //官网例子 title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }); } } } </script></p> <style lang='stylus' scoped> .line height 100% .main width:300px; //宽高也不可少 height:200px; </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"line"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"main"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">let</span> echarts = <span class="hljs-built_in">require</span>(<span class="hljs-string">'echarts/lib/echarts'</span>);<span class="hljs-comment">//引入echarts</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'echarts/lib/chart/bar'</span>); <span class="hljs-comment">//引入柱状图</span> <span class="hljs-comment">// 引入提示框和标题组件</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'echarts/lib/component/tooltip'</span>); <span class="hljs-built_in">require</span>(<span class="hljs-string">'echarts/lib/component/title'</span>); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span>{ data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">myChart</span>:{} } }, mounted(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.initEcharts(); }, <span class="hljs-attr">methods</span>:{ initEcharts(){ <span class="hljs-keyword">let</span> THIS=<span class="hljs-keyword">this</span>; <span class="hljs-keyword">let</span> mainDiv = THIS.$refs.main; <span class="hljs-comment">//找到绘制的区域,强烈推荐使用refs</span> <span class="hljs-keyword">var</span> myChart = echarts.init(mainDiv); <span class="hljs-comment">//初始化</span> myChart.setOption({ <span class="hljs-comment">//官网例子</span> title: { <span class="hljs-attr">text</span>: <span class="hljs-string">'ECharts 入门示例'</span> }, <span class="hljs-attr">tooltip</span>: {}, <span class="hljs-attr">xAxis</span>: { <span class="hljs-attr">data</span>: [<span class="hljs-string">'衬衫'</span>, <span class="hljs-string">'羊毛衫'</span>, <span class="hljs-string">'雪纺衫'</span>, <span class="hljs-string">'裤子'</span>, <span class="hljs-string">'高跟鞋'</span>, <span class="hljs-string">'袜子'</span>] }, <span class="hljs-attr">yAxis</span>: {}, <span class="hljs-attr">series</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'销量'</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">data</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">20</span>, <span class="hljs-number">36</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>] }] }); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">'stylus'</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> .line height 100% .main width:300px; //宽高也不可少 height:200px; </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>4实现效果如下</p> <p><span class="img-wrap"><img data-src="/img/bVbeQ3C?w=369&amp;h=214" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>5,按需引入其他图表,可以参考可以按需引入的模块列表见 <a href="https://github.com/ecomfe/echarts/blob/master/index.js" rel="nofollow noreferrer" target="_blank">https://github.com/ecomfe/ech...</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_27057.html