Vue使用echarts

安装echarts依赖

npm install echarts -S

 

main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

（对于一个vue脚手架项目来说，在main.js里使用Vue.prototype声明的变量，实际上是为Vue对象添加了一个原型属性）

 

准备一个DOM节点作为echarts 的渲染容器，需要定义宽高

<div id="box" style="width:100%;height:300px"></div>

 

对照echarts官网设置参数

　mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
        let myChart = this.$echarts.init(document.getElementById('box'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {　　// x坐标
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},　　// y坐标
            series: [{
                name: '销量',
                type: 'bar',　　// 表格类型
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }

 

在webpack中使用echarts（引入)

// 引入基本模板
let echarts = require('echarts/lib/echarts')

　// let echarts = require('echarts');

// 按需引入
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')