vue中使用可视化echarts

1.下包

npm i echarts --save

2.引入并绑定在vue实例上

// 引入可视化echarts

import * as echarts from 'echarts'

// 绑定在实例上

Vue.prototype.$echarts = echarts

3.使用$echarts.init初始化一个dom，使用setoption方法把数组中的数据以图标形式打印在初始化的dom里，代码如下

<template>

<div>

  <div class="EchartPractice">

    <div id="main"></div>

  </div>

  </div>

</template>

<script>

import ditu from './ditu.vue';

export default {

  name: 'echartsa',

  components: {

    ditu,

  },

  methods: {

    drawChart() {

      // 初始化一个echarts的dom

      let myEchart = this.$echarts.init(document.getElementById("main"));

      let option = {

        // 标题

        title: {

          text: "Vue中使用Echarts小练习"

        },

        // 图例

        tooltip: {},

        legend: {

          data: ["销量"]

        },

        // 类别数组

        xAxis: {

          data: ["苹果", "香蕉", "橘子", "葡萄",]

        },

        // 销量数组，bar柱形图

        yAxis: {},

        series: [{

          name: '销量',

          type: "bar",

          data: [50, 60, 45, 30,]

        }]

      };

      // 折线图

      // let option = {

      //   xAxis: {

      //     type: 'category',

      //     data: ['A', 'B', 'C']

      //   },

      //   yAxis: {

      //     type: 'value'

      //   },

      //   // line折线图

      //   series: [

      //     {

      //       data: [120, 200, 150],

      //       type: 'line'

      //     }

      //   ]

      // };

      // 饼图

      //  let option = {

      //     series: [

      //       {

      //         // 饼图pie

      //         type: 'pie',

      //         data: [

      //           {

      //             value: 335,

      //             name: '直接访问'

      //           },

      //           {

      //             value: 234,

      //             name: '联盟广告'

      //           },

      //           {

      //             value: 1548,

      //             name: '搜索引擎'

      //           },{

      //             value: 1000,

      //             name: '引擎'

      //           }

      //         ]

      //       }

      //     ]

      //   };

      // 散点图scatter

      // let option = {

      //   xAxis: {

      //     data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

      //   },

      //   yAxis: {},

      //   series: [

      //     {

      //       type: 'scatter',

      //       data: [220, 182, 191, 234, 290, 330, 310]

      //     }

      //   ]

      // };

      // 通过setoptions方法把数据生成柱状图放到初始化出来的dom上

      myEchart.setOption(option);

    }

  },

  // 实例化完成调用方法

  mounted() {

    this.drawChart();

  }

}

</script>

<style>

#main {

  width: 600px;

  height: 400px;

  margin: auto;

  margin-top: 100px

}

</style>