<div class="blogpost-body" id="cnblogs_post_body">
<p>项目中需要使用一些折线图、柱状图、饼状图等等，之前使用过heightCharts（关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/p/6224390.html ），觉得这货不开源，只是做展示的话又点浪费时间，于是看了下eCharts，于是在vue-cli搭建的项目中添加了eCharts，下面是具体步骤和自己的一些学习笔记，参照于Echarts3官网</p>
<div>
1.在vue-cli项目中添加webpack配置，本文引入的最新版本。在
<code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从
<code>3.1.1</code> 开始由官方
<a href="https://github.com/ecomfe/">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。
</div>
<div>
</div>
<p>使用npm添加package.json文件中的配置并下载相关npm包依赖</p>
<div class="cnblogs_code">
<pre class="blockcode">npm install echarts --save</pre>
</div>
<p>然后在项目文件的入口js文件main.js中添加</p>
<div class="cnblogs_code">
<pre class="blockcode">import echarts <span style="color:#0000ff;">from</span> <span style="color:#800000;">"</span><span style="color:#800000;">echarts</span><span style="color:#800000;">"</span></pre>
</div>
<p>在需要添加图标的组件中创建依赖的实例</p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#0000ff;">var</span> echarts = require(<span style="color:#800000;">'</span><span style="color:#800000;">echarts</span><span style="color:#800000;">'</span>);</pre>
</div>
<p>使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大。也可以只按需引入需要的模块。例如</p>
<div class="cnblogs_code">
<pre class="blockcode"><span style="color:#008000;">//</span><span style="color:#008000;"> 引入 ECharts 主模块</span>
<span style="color:#0000ff;">var</span> echarts = require(<span style="color:#800000;">'</span><span style="color:#800000;">echarts/lib/echarts</span><span style="color:#800000;">'</span><span style="color:#000000;">);
</span><span style="color:#008000;">//</span><span style="color:#008000;"> 引入柱状图</span>
require(<span style="color:#800000;">'</span><span style="color:#800000;">echarts/lib/chart/bar</span><span style="color:#800000;">'</span><span style="color:#000000;">);
</span><span style="color:#008000;">//</span><span style="color:#008000;"> 引入提示框和标题组件</span>
require(<span style="color:#800000;">'</span><span style="color:#800000;">echarts/lib/component/tooltip</span><span style="color:#800000;">'</span><span style="color:#000000;">);
require(</span><span style="color:#800000;">'</span><span style="color:#800000;">echarts/lib/component/title</span><span style="color:#800000;">'</span>);</pre>
</div>
<pre class="blockcode"><code>各种资源的列表详情请查阅官网的github仓库 https://github.com/ecomfe/echarts/blob/master/index.js<br><br>在模板中创建所需的dom</code><br><br></pre>
<div class="cnblogs_code">
<pre class="blockcode"><!-- ECharts图表测试 -->
<div id=<span style="color:#800000;">"</span><span style="color:#800000;">charts</span><span style="color:#800000;">"</span> style=<span style="color:#800000;">"</span><span style="color:#800000;">width:'100%',height:'3.54rem'</span><span style="color:#800000;">"</span>>
<div id=<span style="color:#800000;">"</span><span style="color:#800000;">main</span><span style="color:#800000;">"</span> :style=<span style="color:#800000;">"</span><span style="color:#800000;">{width:'100%',height:'3.54rem'}</span><span style="color:#800000;">"</span>></div>
</div></pre>
</div>
<pre class="blockcode"><code>写入js：</code><br><br></pre>
<div class="cnblogs_code">
<pre class="blockcode">export <span style="color:#0000ff;">default</span><span style="color:#000000;"> {
name: </span><span style="color:#800000;">'</span><span style="color:#800000;">Bank</span><span style="color:#800000;">'</span><span style="color:#000000;">,
data () {
</span><span style="color:#0000ff;">return</span><span style="color:#000000;"> {
}
},
components: {
},
computed: {
},
methods: {
},
mounted() {
</span><span style="color:#008000;">/*</span><span style="color:#008000;">ECharts图表</span><span style="color:#008000;">*/</span>
<span style="color:#0000ff;">var</span> myChart = echarts.init(document.getElementById(<span style="color:#800000;">'</span><span style="color:#800000;">main</span><span style="color:#800000;">'</span><span style="color:#000000;">));
myChart.setOption({
series : [
{
name: </span><span style="color:#800000;">'</span><span style="color:#800000;">访问来源</span><span style="color:#800000;">'</span><span style="color:#000000;">,
type: </span><span style="color:#800000;">'</span><span style="color:#800000;">pie</span><span style="color:#800000;">'</span><span style="color:#000000;">,
radius: </span><span style="color:#800000;">'</span><span style="c |
|
转播
