vue中插入Echarts示例

首先，第一步下载Echarts。

淘宝镜像

npm install --registry=https://registry.npm.taobao.org 
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts

第二步，引入echarts。

import echarts from 'echarts'

第三步，初始化。

let myChart = echarts.init(document.getElementById('chart_example'));

第四步，定义数据。

let option = {
        color: ['#f44'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        xAxis : [
          {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'每月花费',
            type:'bar',
            barWidth: '60%',
            data:[995,666,444,858,654,236,645,546,846,225,547,356]
          }
        ]
      };

第五步，绘制。

myChart.setOption(option);

效果图

 

完整示例代码