echarts環形圖

最近比較忙，要開發得東西很多，今天得空整理下，來個簡單得環形圖，先上圖

覺得有用得就看看吧

echarts 引入就不多說了，只講解配置項，寫了註解

let crr = [
        {name:'兔子',value:6},
        {name:'狗子',value:10},
        {name:'貓子',value:4},
        {name:'虎子',value:0},
        {name:'獅子',value:2},
        {name:'鴨子',value:5},
        {name:'蛇子',value:5},
      ]
      let arr = JSON.parse(JSON.stringify(crr)).splice(0, 3)
      let arr1 = JSON.parse(JSON.stringify(crr)).splice(3, 6)
      const option = {
        //滑鼠滑過提示框顯示
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0.7)',//背景顏色
          // borderWidth: 0,// 提示框得邊框
          textStyle: {
            color: '#fff', //設定文字顏色
          },
          formatter: function(params) {
            //在此處直接用 formatter 屬性
            // 這裡可以使用html自定義自己想要得樣式
            return `<div>${params.name}<a>${params.value}</a>只</div>
            `
          },
        },
        legend: [ //這裡為了上下顯示，分了兩部分，不需要得同學可以合為一個
          {
            bottom: 60,
            left: 160,
            icon: 'circle',
            data: arr,
            itemHeight: 10,//寬
            itemWidth: 10,//高
            itemGap: 50, //間距
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
          },
          {
            bottom: 30,
            icon: 'circle',
            data: arr1,
            left: 120,
            itemHeight: 10,//寬
            itemWidth: 10,//高
            itemGap: 50, //間距
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['25%', '45%'], //半徑，根據這個調節圖形大小
            center: ['50%', '40%'],
            // 設定值域的那指向線
            labelLine: {
              normal: {
                show: false, // show設定線是否顯示，預設為true，可選值：true ¦ false
              },
            },
            data:crr,
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                  },
                },
                color: function(params) {
                  //自定義顏色
                  var colorList = ['#00FAFF', '#503EFF', '#FFB660', '#00FFAA', '#1677FF', '#D96647', '#D6D947', '#0BE5AA', '#207CFE', '#20C1FE', '#AFA3F5',]
                  return colorList[params.dataIndex]
                },
              },
            },
            label: { //顯示文字富文字寫法，因為echarts有很多地方只能用這種寫法，用不了自定義html模板，所以這種同學們該多學學，好更改自己想要得樣式
              normal: {
                show: true,
                selectedMode: true,
                formatter: '{zoo|{c}}只\n{hr|}{b}    {bsn|}',
                rich: {
                  zoo: { //自定義個zoo屬性，然後上面{c}就會變成zoo屬性
                    color: this.$store.state.color,
                    lineHeight: 22,
                    fontSize: 14,
                  },
                  bsn: { 同zoo
                    height: 8,
                    width: 8,
                    lineHeight: 0,
                    marginBottom: 10,
                    padding: [1, -9],
                    borderRadius: 5,
                    backgroundColor: 'auto', // 圓點顏色和餅圖塊狀顏色一致
                  },
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 14,
                },
              },
            },
          },
        ],
      }
      echarts.setOption(option) //這裡要用自己得echarts哦

這只是簡單得環形圖，博主也寫過
柱形圖，折線圖，柱與折混合得，桑基圖，儀表盤

附圖，博主寫的

這裡推薦大家個網站www.makeapie.com/explore.html

這裡有很多型別得echarts還樣式好看
2月15號就涼了，我也是發現得較晚，大家能用的上最好，很長一段時間沒更新也是抱歉，最後祝大家新年快樂

本作品採用《CC 協議》，轉載必須註明作者和本文連結