vue使用echarts可视化图形插件

1.安装echarts:  cnpm/npm i echarts -S

2.main.js中   import echarts from 'echarts'    Vue.prototype.$echarts = echarts;

3.组件中使用：

 

<template>
  <div class="echart_box">
    <div id="myChart" :style="{width: '600px', height: '400px',margin:'0 auto'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: 'Vue中使用echarts的demo' },
        tooltip: {},
        xAxis: {
          data: ["橙子", "橘子", "柚子", "榴莲", "水蜜桃", "栗子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [15, 20, 37, 15, 8, 23]
        }]
      });
    }
  }
}

</script>

 

4.具体参数配置 方法见：http://echarts.baidu.com/