vue 使用echarts以及环形图的运用实例 -金沙1005

npm install echarts -s

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活clion

datagrip dataspell

dotcover dotmemory

dottrace goland

phpstorm pycharm

resharper reshac

rider rubymine

webstorm 全家桶

解锁下载

或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局引入

main.js

// 引入echarts
import echarts from 'echarts'
vue.prototype.$echarts = echarts

hello.vue

export default {
  name: 'hello',
  data () {
    return {
      msg: 'welcome to your vue.js app'
    }
  },
  mounted(){
    this.drawline();
  },
  methods: {
    drawline(){
        // 基于准备好的dom，初始化echarts实例
        let mychart = this.$echarts.init(document.getelementbyid('mychart'))
        // 绘制图表
        mychart.setoption({
            title: { text: '在vue中使用echarts' },
            tooltip: {},
            xaxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yaxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

以上只是插件的柱形图，我们今天要实现的是一下环形图

同理引入echarts后

data中定义echarts初始配置：

 // 图表配置项
      option: {
        color:['#4472c5','#ed7c30','#80ff80','#ff8096','#800080'],//配置颜色
        tooltip: {
          trigger: "item",
          formatter: "{a} 
{b} : {c} ({d}%)"
        },
        // 图例
        legend: {
          type: "scroll",
          // orient: "vertical",
          top: 20,
          left: "center",
          data: [], //图例数据从后台获取
          textstyle: {
            //图例文字的样式
            color: "#999",//['#4472c5','#ed7c30','#80ff80','#ff8096','#800080']不同样式
            fontsize: 12
          }
        },
        // 直角坐标系内绘图网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "30%",
          containlabel: true
        },
        //图表展示数据从后台获取
        series: []
      }

获取后台数据并动态生成echarts需要的数据：

   methods: {
    getchartdata() {
      // 图例legend数据
      let legenddata = [];
      //this.piedata为后台返回数据
      if (this.piedata) {
        for (let i = 0; i < this.piedata[0].data.length; i  ) {
          legenddata.push(this.piedata[0].data[i].name);
        }
        this.option.legend.data = legenddata;
        // this.option.series[0].name = legenddata;
        var center;
        for (var i in this.piedata) {
          center = 100 / (2   number(i));
        }
 
        for (var i = 0; i < this.piedata.length; i  ) {
          this.option.series[i] = {
            name: this.piedata[i].name,
            type: "pie",       
            center: [center * number(i   1)   "%", "60%"],     //每个圆环图的位置，动态计算
            //第一个是内径。第二个是外径。内劲变大就是圆环
            radius: [center   "%", center   center   "%"],     //每个圆环图的大小，动态计算
            avoidlabeloverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textstyle: {
                  fontsize: "30",
                  fontweight: "bold"
                }
              }
            },
            labelline: {
              normal: {
                show: false
              }
            },
            data: []
          };
          this.option.series[i].data = this.piedata[i].data;
        }
        // this.piedata.foreach((item, i) => {
        //   console.log(i);
        // });
      } else {
        this.option.legend.data = [];
        this.option.series[0].data = [];
      }
    },
    drawpie() {
      this.getchartdata();//如果配置完毕option，且不需要这一步
      //核心代码：
      // 基于准备好的dom，初始化echarts实例
      let piechart = this.$echarts.init(document.getelementbyid("piechart"));
      // 绘制图表
      piechart.setoption(this.option);
    }
  },

数据格式：

   this.piedata = [
     //第一个圆环图
      {
        name: "左",   
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      },
   //第二个圆环图
      {
        name: "中",
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      }, 
      //第三个圆环图
      {
        name: "右",
        data: [
          {
            name: "",
            value: "37"
          },
          {
            name: "3",
            value: "5"
          },
          {
            name: "1",
            value: "24"
          },
          {
            name: "2",
            value: "15"
          },
          {
            name: "6",
            value: "2"
          },
          {
            name: "5",
            value: "3"
          }
        ]
      }
    ];

数据请求转换格式

this.list = res.data;
						
var self = this;
this.list.foreach(function(value,index,array){
		    				
 self.piedata[0].data[index].value = value.number;
 self.piedata[0].data[index].name = value.name;
		    				
});
this.piedata[0].name = "jj";
//console.log(this.piedata)
this.drawpie();//绘制图标函数