Echarts 创建饼状图-入门实例

npm install echarts

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

<div ref="myChart" style="width: 500px; height: 500px;">
    </div>

<script>
  export default {
    name: "App",
    mounted() {
      //document渲染完成
      this.draw()
    },
    methods: {
      draw() {
        let myChart = this.$echarts.init(this.$refs.myChart)
        //获取容器document
  //数据
        let data = [
          {
            value: 154,
            name: '华为'
          },
          {
            value: 254,
            name: '苹果'
          },
          {
            value: 314,
            name: '小米'
          },
          {
            value: 424,
            name: '真我'
          }
        ]//数据
        let option = {
          // title: //设置标题属性  非必须
          // {
          //   text: '手机排行榜',
          //   left: 'center'  //居中
          // },
         series: //图表对象
          {
            name: '销量统计',
            type: 'pie',//图表类型 非常重要这里  pie为饼图
            data: data //图表的数据
          }
        }
        myChart.setOption(option)
        //绘制
      }
    }
  }
</script>

// title: //设置标题属性  非必须
          // {
          //   text: '手机排行榜',
          //   left: 'center'  //居中
          // },

legend://设置图例 
          {
            bottom: 'bottom',//设置图例位置
            //  orient: 'verical'  //排列 纵向 也就是从上往下 默认横向
          }