echarts 饼图 默认高亮某一项 画圆 富文本

背景

完成下面这幅图，默认高亮第一项，可交互；
使用vue + echarts完成

开发

搭建环境-vue

使用 vue-cli 搭建vue基本环境，然后按照echarts库，如下：

yarn add echarts

引入echarts

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

编码

<template>
  <div class="hello">
    <div id="pieChart" ref="echart" style="width: 600px;height:400px;"></div>
    <ul class="list-container">
      <li class="each-item" v-for="(item,index) in data" :key="index"
      @click="handleClick(index)">
        <div class="line" :style="{backgroundColor: item.color}"></div>
        <div class="desc">
          <p class="name">{{item.name}}</p>
          <p class="num">{{item.value}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      /**
       * name 名称
       * value 数据
       * color 饼图和展示数据的竖条颜色，这是一一对应的
       */
      data: [
        {
          name: "苹果",
          value: 28,
          color: "#fc7e3f"
        },
        {
          name: "香蕉",
          value: 26,
          color: "#f5d878"
        },
        {
          name: "菠萝",
          value: 25,
          color: "#a3e8b0"
        },
        {
          name: "哈密瓜",
          value: 28,
          color: "#64d0c7"
        },
        {
          name: "梨",
          value: 14,
          color: "#5fa8f4"
        },
        {
          name: "橘子",
          value: 9,
          color: "#8578e9"
        },
        {
          name: "橙子",
          value: 15,
          color: "#deb8e2"
        },
        {
          name: "桃子",
          value: 12,
          color: "#ec8683"
        },
        {
          name: "李子",
          value: 30,
          color: "#b4b2b4"
        }
      ],
      currentIndex: 0  // 饼图高亮的第几个的序号
    };
  },
  methods: {
    drawChart() {
      // 初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pieChart"));
      let option = {
        color: this.data.map(o=>o.color),
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: function (params) { // 饼图中间显示的名称及百分比，其中b 对应rich里面b的样式，d对应rich里面d的样式
                return `{b|${params.name}}\n{d|${params.percent}%}`;
              },
              rich: {
                b: {color: '#888',height: 30,fontSize: 20},
                d: {color: '#333',height: 40,fontSize: 26,fontWeight: 600}
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "24",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data
          },
          {
            name: "",
            type: "pie",
            radius: ["45%", "45.4%"],
            tooltip:{show:false},
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle:{
              color: '#DCDCDC'
            },
            data: [{
              name:'内环',
              hoverAnimation: false,
              value: 100
            }]
           },
           {
             name: "统计",
            type: "pie",
            radius: ["75%", "75.4%"],
            tooltip:{show:false},
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle:{
              color: '#DCDCDC'
            },
            data: [{
              name:'外环',
              hoverAnimation: false,
              value: 100
            }]
           }
        ]
      };
      //使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      //默认第一个数据高亮
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0, // series 数据数组第几个
        dataIndex: this.currentIndex
      });
      myChart.on("mouseover", e => {
        if(e.seriesIndex != 0){
          return;
        }
        //取消默认高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: this.currentIndex
        });
        this.currentIndex = e.dataIndex; //将当前高亮的序号记录下来
        //鼠标悬停位置高亮
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: e.seriesIndex,
          dataIndex: e.dataIndex
        });
      });
      this.myChart = myChart;
    },
    handleClick(i){
      this.myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: this.currentIndex
      });
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: i
      });
      this.currentIndex = i;
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

<style scoped>
.list-container{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-inline-start: 0;
  width: 600px;
}
.each-item{
  width: 200px;
  height: 55px;
  margin-bottom: 50px;
  flex-grow: 0;
  flex-shrink: 0;
  padding-left: 50px;
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
}

.line{
  height: 100%;
  width: 3px;
  border-radius: 2px;
  margin-right: 10px;
}

.desc{
  height: 100%;
  vertical-align: top;
}
.name, .num{
  margin: 0;
  text-align: left;
}

.name{
  color: #9d9d9d;
  font-size: 20px;
  line-height: 27px;
}

.num{
  font-size: 22px;
  line-height: 38px;
  color: #363436;
}
</style>

总结

此案例涉及到以下几个知识点：

1. 默认高亮凸出某一项
2. 富文本设置
3. 画个纯色的圆