在vue中使用ECharts图表

1. 下载安装

npm install echarts --save

2. 在main.js引入echarts

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

3. 在helloWorld中使用

<template>
  <div class="hello">
  <h1>{{ msg }}</h1>
    <div class="" id="broken" style="height:500px;width:98%;"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.brokenLine()
  },
  methods: {
    // 折线图
    brokenLine () {
    <!--初始化-->
      let myChart = this.$echarts.init(document.getElementById('broken'))
      // let myChart = this.$echarts.init(document.getElementById('annulus'))
      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: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['北京', '中国', '测试', '组织', '我们大家一起'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '问题数量',
            axisLabel: {
              formaatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          },
          {
            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]
          }
        ]
      })
    }
  }
}
</script>