vue-echarts组件

echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html

1.找到脚手架项目所在地址，执行cnpm install echarts，安装echarts组件

2.按需导入，以加快打开速度

// 引入基本模板
let echarts = require(‘echarts/lib/echarts’)
// 引入柱状图组件
require(‘echarts/lib/chart/bar’)
// 引入提示框和title组件
require(‘echarts/lib/component/tooltip’)
require(‘echarts/lib/component/title’)

3.准备div标签 容纳报表图形

4.vue代码中做数据配置
export default {
name: ‘App’,
data(){
return{
chartColumn:null
}
},
methods:{
initData(){
let dt=document.querySelector("#chart")

    this.chartColumn=echart.init(dt)
    this.chartColumn.setOption(
      {
        title: {text:'员工工资',left:'center'},
        tooltip: {},
        xAxis: {
                type: 'category',
                data: ['销售部', '财务部', '实施部', '企划部', '行政部']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data:
                [120,{value: 200,name:'支出异常',itemStyle: {color: '#a90000'}},150, 80, 70],
                type: 'bar'
            }]
      }
    )

  }
},
mounted(){
    this.initData()
}

}