百万前端之vue2.x+echarts

vue2+echarts其实很简单，可以先到apache echarts官网（https://echarts.apache.org/zh）查看文档了解用法。

以下例子是基于vue2.x环境下运行的：

1. 安装echarts

npm install echarts

2. 在mian.js中引入

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

3. 页面中使用

<template>
    <div class="content">
        <van-sticky>
            <van-nav-bar title="我的数据" left-arrow @click-left="$router.go(-1)" />
        </van-sticky>
        <!-- 商品销量饼图 -->
        <van-cell title="商品销量饼图"/>
        <div class="echarts" id="productRadar" style="width: 100%;height: 25rem;"></div>
    </div>
</template>

<script>
export default {
  name: "echarts",
  data() {
    return {
      indicator: [], //饼图名字数据
      indicatorInfo: []
    };
  },
  created() {},
  mounted() {
    this.getProductData();
  },
  methods: {
    //获取商品销售数据
    getProductData() {
      //初始化数组
      var sales = new Array(); //销售数量
      var prices = new Array(); //销售价格
      this.$axios.productData().then(res => {
        this.mapList = res.data.map.mapList;
        //处理数据后渲染饼图
        let infoName = "";
        this.mapList.map((item, index) => {
          let dataName = item.name.split(" ");
          if (dataName[6] != "") {
            infoName = dataName[1] + dataName[6];
          } else {
            infoName = dataName[0];
          }
          this.indicatorInfo.push(infoName);
          //价格
          this.$set(prices, index, item.price);
          this.$set(sales,index,{
            value:item.sale,
            name:item.name,
          })
        });
        //类型名字
        this.indicatorInfo.map((indi, index) => {
          this.$set(this.indicator, index, {
            name: indi,
            
          });
        });
        this.myInit(sales, prices); //调用echarts绘图
      });
    },
    //绘制饼图方法
    myInit(sales, prices) {
      //饼图
      let charts = this.$echarts.init(
        document.getElementById("productRadar"),
        "dark"
      );
      var option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: sales,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      charts.setOption(option);
    },
  }
};
</script>

<style scoped>
#productRadar {
  margin-top: 0.5rem;
  box-sizing: border-box;
}
</style>

4. 一定要在mounted方法中调用，防止出现渲染不上的问题。（个人看法）

5. 效果图（样式和数据可以根据实际需求调整）

6.其余的雷达图、柱状图、散点图等等方法相同，学会控制数据和改变数据格式就可以轻松搞定大部分echarts啦！