Echarts图表在vue中的使用

1.下载安装Echarts

npm install echarts --save

2.main.js引入echarts

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

3.在helloWorld中使用

    <div class="" id="broken" style="height:500px;width:98%;"></div>

  mounted () {
    this.brokenLine()
  },
  methods: {
    // 折线图
    brokenLine () {
       // 初始化
      let myChart = this.$echarts.init(document.getElementById('broken'))
      myChart.setOption({
        color: ['#e64655', '#1d505c'],
        tooltip: {
          triggger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: false},
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar']},
            restore: {show: false},
            saveAsImage: {show: false}
          }
        },
        calculbale: true,
        legend: {
          data: ['解决', '出现'],
          textStyle: {
            color: '#4dd'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['北京', '中国', '测试', '组织', '我们大家一起'],
            axisLine: {
              lineStyle: {
                color: '#4dd'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '问题数量',
            axisLabel: {
              formaatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: '#4dd'
              }
            }
          },
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '解决',
            type: 'bar',
            data: [1, 2, 1, 3, 8]
          },
          {
            name: '出现',
            type: 'line',
            yAxisIndex: 1,
            data: [8, 3, 4, 6, 7, 1]
          }
        ]
      })
    }
  }

toolbox: {
     feature: {
            dataView: { show: true, readOnly: false }, //数据视图
            magicType: { show: true, type: ["line", "bar"] }, // 切换类型
            restore: { show: true }, //还原
            saveAsImage: { show: true } //下载
          }
        },