天天看點
傳回

【ECharts】環形圖、餅狀圖

目錄

color設定的顔色

環形漸變色

圓環中間顯示文字

懸浮顯示中間文字

懸浮顯示中間文字，預設顯示第一個

循環高亮餅圖塊

label文字過長重疊

label和餅圖一緻

label展示位置

内容為0仍然顯示扇區

圓角環形圖

仿3D環形圖

label帶小圓點

label超出邊界顯示不全

百分比圓環圖

延時動畫（南丁格爾玫瑰圖）

color設定的顔色

【ECharts】環形圖、餅狀圖
option = {
    color:['blue','pink','lightyellow','orange','lightblue'],
    series: [
        {
            name: '通路來源',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜尋引擎'},
                {value: 735, name: '直接通路'},
                {value: 580, name: '郵件營銷'},
                {value: 484, name: '聯盟廣告'},
                {value: 300, name: '視訊廣告'}
            ]
        }
    ]
};

環形漸變色

【ECharts】環形圖、餅狀圖
option = {
    series: [
        {
            name: '通路來源',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                {
                    value: 335,
                    name: '直接通路',
                    itemStyle: {
                        color: {
                            colorStops: [{
                                    offset: 0,
                                    color: '#ff7474 ' // 0% 處的顔色
                                }, {
                                    offset: 1,
                                    color: '#4176ff' // 100% 處的顔色
                                }]
                        }
                    }
                },
                {
                    value: 310,
                    name: '郵件營銷',
                    itemStyle: {
                        color: {
                            colorStops: [{
                                    offset: 0,
                                    color: '#ffe390' // 0% 處的顔色
                                }, {
                                    offset: 1,
                                    color: '#f7c222' // 100% 處的顔色
                                }]
                        }
                    }
                },

            ]
        }
    ]
};

圓環中間顯示文字

管網案例

【ECharts】環形圖、餅狀圖

第一種方式：title的寫法

option = {
  title : {
    show:true,
    text: '充電方式', // \n可以換行
    x:'50%', // center
    y: 'center',
    textAlign: 'center',
    textStyle: {
      fontSize: '16',
      fontStyle: 'normal',
      fontWeight: '600',
      lineHeight: '28',
      color:'#333'
    },
  },
  series: [
    {
      type:'pie',
      radius: ['30%', '40%'],
      label: {
        normal: {
            show: false,
        },
        emphasis: {
            show: true,
        }
      },
      data: [
          {value: 1048, name: '搜尋引擎'},
          {value: 735, name: '直接通路'},
          {value: 580, name: '郵件營銷'},
          {value: 484, name: '聯盟廣告'},
          {value: 300, name: '視訊廣告'}
      ]
    }
  ]
};

第二種寫法：label

【ECharts】環形圖、餅狀圖
option = {
  series: [
    {
      type:'pie',
      radius: ['30%', '40%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: true,
          position: 'center',
          color:'#4c4a4a',
          formatter: '{total|' + 200 +'}'+ '\n\r' + '{active|共釋出活動}',
          rich: {
            total:{
              fontSize: 35,
              fontFamily : "微軟雅黑",
              color:'#454c5c'
            },
            active: {
              fontFamily : "微軟雅黑",
              fontSize: 16,
              color:'#6c7a89',
              lineHeight:30,
            },
          }
        },
        emphasis: {//中間文字顯示
          show: true,
        }
      },
      data: [
        {value: 1048, name: '搜尋引擎'},
        {value: 735, name: '直接通路'},
        {value: 580, name: '郵件營銷'},
        {value: 484, name: '聯盟廣告'},
        {value: 300, name: '視訊廣告'}
      ]
    }
  ]
};

第三種寫法：graphic（還有中間白色間隔）

【ECharts】環形圖、餅狀圖
var i = 0;
var colors=['#5AC8FA','#4BD964','#A16EFF','#FF2D55','#FF9600','#CDCED1'];
option = {
  // 圓環中間的文字
  graphic:[
    {
      type:'text',
      left:'center',
      top:'45%',
      style:{
        text:'标題',
        fill:'#000',
        width:30,
        height:30,
        fontSize:30,
      }
    },
    {
      type:'text',
      left:'center',
      top:'55%',
      style:{
        text:'文本',
        fill:'#969696',
        width:30,
        height:30,
        fontSize:24,
      }
    }
  ],
  series : [
    {
      type:'pie',
      radius: ['45%', '60%'],
      avoidLabelOverlap: false,
      itemStyle:{
        normal:{
          color:function(){
            return colors[i++]
          },
          // 白色間距
          borderWidth: 6,
          borderColor: '#ffffff',
        }
      },
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: false,
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[1,2,3,4]
    }
  ]
}

懸浮顯示中間文字

【ECharts】環形圖、餅狀圖
option = {
  tooltip: {
    trigger: 'item',
    formatter:'{a}<br/>{b}:{c} {d}%'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '通路來源',
      type: 'pie',
      radius: ['30%', '40%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {value: 1048, name: '搜尋引擎'},
        {value: 735, name: '直接通路'},
        {value: 580, name: '郵件營銷'},
        {value: 484, name: '聯盟廣告'},
        {value: 300, name: '視訊廣告'}
      ]
    }
  ]
};

懸浮顯示中間文字，預設顯示第一個

【ECharts】環形圖、餅狀圖
var myChart = echarts.init(document.getElementById('chart-container'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

window.addEventListener('resize', myChart.resize);

var data= [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

var keys = Object.keys(data)

var option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%','60%'],
      hoverOffset: 20,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle:{
            fontSize: '20'
          }
        }
      },
      data: data,
    }
  ]
};

if (option && typeof option === 'object') {
  
  myChart.setOption(option);
  
  // 預設第一個高亮
  myChart.dispatchAction({
    type:'highlight',
    seriesIndex: 0,
    dataIndex: 0
  })
  
  myChart.on('mouseover',function(e){
    // 取消所有高亮
    myChart.dispatchAction({
      type:'downplay',
      seriesIndex: 0,
      dataIndex: keys
    })
    // 目前高亮
    myChart.dispatchAction({
      type:'highlight',
      seriesIndex: 0,
      dataIndex: e.dataIndex
    })
  })
  myChart.on('mouseout',function(e){
    // 取消所有高亮
    myChart.dispatchAction({
      type:'downplay',
      seriesIndex: 0,
      dataIndex: keys
    })
    // 第一個高亮
    myChart.dispatchAction({
      type:'highlight',
      seriesIndex: 0,
      dataIndex: 0
    })
  })
}

循環高亮餅圖塊

【ECharts】環形圖、餅狀圖
var myChart = echarts.init(document.getElementById('chart-container'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

window.addEventListener('resize', myChart.resize);

var option = {
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
 
  timeSetIntervalFun()
}

var currentIndex = 0
function timeSetIntervalFun() {
  timeSetInterval = setInterval(function() {
    var dataLen = option.series[0].data.length;

    // 取消之前高亮的圖形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });

    currentIndex = (currentIndex + 1) % dataLen;

    // 高亮目前塊
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });

  }, 2000);

}

myChart.on('mouseover', function(e) {
  clearInterval(timeSetInterval)
  
  //取消預設選中高亮
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });

  //高亮目前塊
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: e.dataIndex
  });

  currentIndex = e.dataIndex;
});


myChart.on('mouseout', function(e) {
  timeSetIntervalFun()

  // 第一個高亮
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,
    dataIndex: 0
  });

});

label文字過長重疊

【ECharts】環形圖、餅狀圖
option = {
  series: [
    {
      type: 'pie',
      clickable:false,　　　　　　// 是否開啟點選
      minAngle: 15,           　　 // 最小扇區角度（0 ~ 360），防止扇區太小影響互動
      startAngle:45,             // 起始角度
      avoidLabelOverlap: true,    // 是否啟用防止标簽重疊政策
      hoverAnimation:false,　　   // 是否開啟 hover 在扇區上的放大動畫效果。
      silent: true,　　　　　　　　// 圖形是否不響應和觸發滑鼠事件
      radius: ['20%', '30%'],
      center: ['50%', '50%'],
      label: {
        show: true,
        fontSize: '16',
        align: 'left',
        formatter(v) {
          console.log(v)
          let text = v.name
          if(text.length <= 8){
            return text;
          }else if(text.length > 8 && text.length <= 16){
            return text = `${text.slice(0,8)}\n${text.slice(8)}`
          }else if(text.length > 16 && text.length <= 24){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
          }else if(text.length > 24 && text.length <= 30){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
          }else if(text.length > 30){
            return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1, name: '一二三四五六七八九十' },
        { value: 735, name: '一二三四五六' },
        { value: 580, name: '一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十' },
        { value: 484, name: '一二三四五六七八九十一二三四五六七八九十' },
        { value: 300, name: '一二三四五六七八九十一二' }
      ]
    }
  ]
};

label和餅圖一緻

【ECharts】環形圖、餅狀圖
let colorList = ['lightgreen','pink','purple','orange','lightblue']
let dataList = [
  { value: 1048, name: 'Search Engine'},
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]
option = {
  series: [
    {
      type: 'pie',
      radius: ['20%','30%'],
      color: colorList,
      data: dataList.map((item, index) => {
        item.label = {
          // 第一種方法
          color: colorList[index],
          // 第二種方法
          color: 'inherit'
        }
        return item
      }),
    }
  ]
};

label展示位置

【ECharts】環形圖、餅狀圖
option = {
    series: [{
        name: '通路來源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        label: {
            show: true,
            position: 'inside'
        },
        labelLine: {
            show: false,
        },
        data: [
            {
                value: 335,
                name: '良好'
            },
            {
                value: 135,
                name: '不及格',
                label: {
                    show: true,
                    position: 'outside'
                },
                labelLine: {
                    show: true,
                    smooth: true,
                    lineStyle: {
                        color: 'red'
                    }
                }
            }, 
            {
                value: 1548,
                name: '優秀優秀優秀優秀優秀',
                label: {
                    formatter: function (params) {
                        if (params.data.name.length > 5) {
                            var labelNewText = params.data.name.substring(0, 6) + ' ...'
                        }
                        return labelNewText
                    }
                }
            }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

内容為0仍然顯示扇區

配置最小角度就好了。

【ECharts】環形圖、餅狀圖
option = {
  series: [
    {
      type: 'pie',
      radius: ['20%','30%'],
      minAngle: 15,  // 最小的扇區角度（0 ~ 360），用于防止某個值過小導緻扇區太小影響互動
      avoidLabelOverlap: true,   // 是否啟用防止标簽重疊政策
      data: [
        { value: 0, name: 'Search Engine' },
        { value: 25, name: 'Direct' },
        { value: 0, name: 'Email' },
        { value: 40, name: 'Union Ads' },
        { value: 0, name: 'Video Ads' }
      ],
    }
  ]
};

圓角環形圖

【ECharts】環形圖、餅狀圖
option = {
  series: [
    {
      type: 'pie',
      radius: ['30%', '45%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 50,
        borderColor: '#fff',
        borderWidth: 30
      },
      label:{
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

仿3D環形圖

series多個值實作多個圓環

graphic實作環形中間放圖檔、文字

silent: true實作内部淺色圓環不觸發事件，完全沒有效果。

emphasis:實作内部淺色圓環不觸發事件，但是顯示tooltip。

【ECharts】環形圖、餅狀圖
let colors = ["#21BAD6", "#FF9728"];
var img = 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png';
option = {
  color: colors,
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  graphic: [
    {
      type: "image",
      style: {
        image: img,
        width: 80,
        height: 80,
        color: "#fff",
      },
      left: "center",
      top: "center",
    },
    {
      type: "text",
      left: "center",
      top: "60%",
      style: {
        text: "晴天",
        fill: "#333",
        width: 30,
        height: 30,
        fontSize: 12,
      },
    },
  ],
  series: [
    {
      minAngle: 15, //扇區最小角度
      startAngle: 190, //扇區起始角度
      name: "天氣分析",
      type: "pie",
      avoidLabelOverlap: true,
      legendHoverLink: true,
      radius: ["50%", "67%"],
      data: [
        {
          value: 14,
          name: "雨",
        },
        {
          value: 48,
          name: "晴",
        },
      ],
    },
    {
      minAngle: 15, //扇區最小角度
      startAngle: 190, //扇區起始角度
      name: "天氣分析",
      type: "pie",
      avoidLabelOverlap: true,
      legendHoverLink: true,
      radius: ["40%", "50%"],
      data: [
        {
          value: 14,
          name: "雨",
        },
        {
          value: 48,
          name: "晴",
        },
      ],


      // 點選不放大
      silent: true,
      // 點選不放大，但是顯示tooltip
      emphasis:{//使用emphasis
         disable:false,
         scale:false,//不縮放
         scaleSize:0,//為了防止失效直接設定未0
      },

      itemStyle: {
        opacity: 0.7,
      },
      label:{
        show: false
      }
    }
  ],
};

參考連結： Echarts餅圖,環形圖,滑鼠觸碰後取消預設放大效果_

label帶小圓點

【ECharts】環形圖、餅狀圖
let colors = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#0D2A95" },
    { offset: 1, color: "#05ABFA" },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#148eb7" },
    { offset: 1, color: "#58b986" },
  ]),
];

// 資料
let data = {
  name: "人口分析",
  type: "pie",
  radius: "65%",
  avoidLabelOverlap: true,
  legendHoverLink: true,
  color: colors,
  data: [
    {
      value: 14,
      name: "男人",
      label: {
        shadowColor: colors[2],
      },
    },
    {
      value: 48,
      name: "女人",
      label: {
        shadowColor: colors[1],
      },
    },
  ],
}

option = {
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(0,0,0,.6)",
    borderColor: "rgba(147, 235, 248, .8)",
    textStyle: {
      color: "#FFF",
    },
  },
  legend: {
    show: true,
    bottom: "0",
    left: "center",
    textStyle: {
      color: "#333",
    },
  },
  series: [
    {
      ...data,
      
      // label 文字的設定
      label: {
        formatter: "{b|{b}}\n {per|{d}% }",
        rich: {
          b: {
            color: "#333",
            fontSize: 12,
            lineHeight: 24,
          },
          per: {
            color: "#333",
            fontSize: 12,
          },
        },
      },

      // label 線條的設定
      labelLine: {
        length: 10, // 第一段線 長度
        length2: 10, // 第二段線 長度
        show: true,
        emphasis: {
          show: true,
        },
      },
    },

    // label 圓點的設定
    {
      ...data,
      label: {
        backgroundColor: "auto", //圓點顔色，auto：映射的系列色
        height: 0,
        width: 0,
        lineHeight: 0,
        borderRadius: 2.5,
        shadowBlur: 8,
        shadowColor: "auto",
        padding: [2.5, -2.5, 2.5, -2.5],
      },
      labelLine: {
        length: 10, // 第一段線 長度
        length2: 10, // 第二段線 長度
        show: false,
      },
    },
  ],
}

label超出邊界顯示不全

縮小餅圖大小或者label文字實作分行。

百分比圓環圖

女孩的占比30%

【ECharts】環形圖、餅狀圖
// girl的占比
let girl = 300;
let boy = 700;
let total = 1000;
let per = 30; // per = ((300/1000）*100)*100
let color =[
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: "#17DFFD" },
    { offset: 1, color: "#123E83" },
  ]),
  '#f1f1f1',
];
option = {
  color: color,
  graphic:[
    {
      type:'text',
      left:'center',
      top:'43%',
      style:{
        text: girl,
        textAlign: "center",
        fill: color[0],
        fontSize: 32,
      }
    },
    {
      type:'text',
      left:'center',
      top:'52%',
      style:{
        text: `女生占比`,
        textAlign: "center",
        fill: color[0],
        fontSize: 34,
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: ['50%','30%'],
      hoverAnimation: false,
      avoidLabelOverlap: false,
      data: [
        { value: per, name: 'per' },
        { value: 100, name: 'total' },
      ],
      label: {
        show: true,
        formatter:function(d) {
          if(d.data.name == 'per') {
            return `{value|${per}%}`
          }else {
            return ''
          }
        },
        rich:{
          value:{
            fontSize:18,
            color:color[0]
          }
        }
      }
    }
  ]
};

延時動畫（南丁格爾玫瑰圖）

【ECharts】環形圖、餅狀圖
option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
    {
      name: '指令',
      type: 'pie',
      radius: [20, 140],
      center: ['50%', '50%'],
      roseType: 'radius',
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ],
      // 延時動畫（渲染出來的時間）
      animationEasing: "cubicInOut",
      animationDuration: 6000,
    },
  ]
};
資料可視化 echarts 前端 javascript
上一篇: 歸檔和取檔 (NSKeyedArchiver and NSKeyedUnarchiver)
下一篇: Echarts動态加載餅狀圖的執行個體

繼續閱讀