vue中使用echart图表

1、安装echarts依赖

//方法一
npm install echarts -S
//方法二  或者使用淘宝镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

2、创建图表全局引入

1
2
3

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

3、页面结构

//  xx.vue
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

//
//
//
export default {
        name: "asset",
        mounted(){
          this.drawLine();
        },
        methods: {
          drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
              title: {text: ''},
              tooltip: {},
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2018/12/04', '2018/12/05', '2018/12/06', '2018/12/07', '2018/12/08', '2018/12/09', '2018/12/10','2018/12/11','2018/12/12']
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [20000, 30000, 50000, 70000, 60000 ,100000, 130000, 140000,170000],
                type: 'line',
                itemStyle: {
                  color: 'rgb(24, 143, 244)'
                },
                areaStyle: {    // 颜色渐变
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{    //$echart 在main.js里面已经写到了
                    offset: 0,
                    color: 'rgb(24, 143, 244)'
                  }, {
                    offset: 1,
                    color: 'rgb(207, 232, 253)'
                  }])
                },
              }]
            });
            }
          },
         }