vue中插入Echarts示例

• 第一步，下载Echarts

npm install echarts --save

• 第二步，引入echarts

main.js
//引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts //引入组件

• 第三步，初始化。

html
<template>
	<div id="Statistics"></div>
</template>

mounted () {
	let Statistics= echarts.init(document.getElementById('Statistics'));
	   // 绘制图表
    Statistics.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
      },
      series: [
        {
          name:'访问来源',
          type:'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
          ]
        }
      ]
    });
     //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {Statistics.resize()});
}

• 附加一份不错的开发文档
  echarts开发文档