简单的饼状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts-动画</title> <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script> </head> <div style="width: 780px;height: 400px;" id="box"></div> </body> <script> let myChart = echarts.init(document.querySelector('#box')) // 第一个颜色是从正上方开始的 let option = { tooltip: { trigger: 'item' }, series: [ { type: 'pie', center: ['40%', '50%'], // 饼状图的位置 /** * radius：饼状图的大小 * 它是一个数组，第1个值表示里面的圆的大小 * 第2个值表示外面的圆的大小 * */ radius: ['45%', '60%'], data: [ { value: 1048, name: '名称1' }, { value: 735, name: '名称2' }, { value: 580, name: '名称3' }, { value: 484, name: '名称4' }, { value: 300, name: '名称5' } ] } ] } myChart.setOption(option); </script> </html> 
给饼状图设置渐变色
...其他配置, data:[ 相关数据], itemStyle: { normal: { label: { padding: [0, 0], alignTo: 'labelLine' }, color: (list) => { let colorList = [ { "colorStart": "#FF9800", "colorEnd": "#FFD180" }, { "colorStart": "#673AB7", "colorEnd": "#9575CD" }, { "colorStart": "#0F9D58", "colorEnd": "#4CAF50" }, { "colorStart": "#00BCD4", "colorEnd": "#64FFDA" }, { "colorStart": "#E91E63", "colorEnd": "#FF80AB" }, ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { //左、下、右、上 offset: 0, color: colorList[list.dataIndex]["colorStart"], }, { offset: 1, color: colorList[list.dataIndex]["colorEnd"], }, ]); } } },
给饼状图外围配置一条虚线
{ //最外部细虚线 // 类型是仪表盘 type: 'gauge', // 位置必须和饼状图的一样，否者设置出来会有偏差 center: ['40%', '50%'], /** * startAngle：仪表盘起始角度。 * 圆心正右手侧为0度，正上方为90度，正左手侧为180度。 * 就是说：逆时针 * */ startAngle: 270, // endAngle：仪表盘结束角度。最初值是：-89.9999, endAngle: -90, // 设置虚线的大小 radius: '75%', // 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度 // 如果设置为 show: true,就会显示刻度样式 axisTick: { show: false }, // false 不显示标签 axisLabel: { show: false }, // 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距 // splitNumber: 65 更加直接的表现是外层有65段虚线 splitNumber: 65, axisLine: { // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见 show: false, // lineStyle：仪表盘轴线样式。 // lineStyle: { // // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8'] // color: [ // [0.1, 'red'], // 0~10% 红轴 // [0.2, 'green'], // 10~20% 绿轴 // [0.3, 'blue'], // 20~30% 蓝轴 // ], // width: 10 // } }, // 分隔线样式。 splitLine: { show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见 length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度 lineStyle: { width: 10, // 分隔线线长。支持相对半径的百分比。 color: '#E5E6E8', // 线的颜色 } }, // 仪表盘详情，用于显示数据。 detail: { show: false }, },
视觉引导线配置
...其他配置, data:[ 相关数据], // 标签的视觉引导线配置 labelLine: { show: true, // 是否显示视觉引导线 length: 20, // 视觉引导线第一段的长度。 length2: 40, // 视觉引导项第二段的长度。 lineStyle: { color: '#E5E6E8', // 这里设置扇线颜色为灰色 width: 1, // 线段宽度 type: 'solid', // 线段类型，默认为实线 } }, 
为什么hover的时候视觉引导线发生了变化?
我看官网都不会发生变化. 是与版本有关还是配置项有关 hover时视觉引导线和对应的名称样式不发生改变
...其他配置, data:[ 相关数据], // 高亮状态的扇区和标签样式 设置饼图外围虚线 emphasis: { // 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致 label: { color: '#333333' }, labelLine: { // 这里设置悬停时引导线的颜色，与非悬停时保持一致 lineStyle: { color: '#E5E6E8' } } }
可以自定义富文本样式
...其他配置, data:[ 相关数据], // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 label: { show: true, // 标签的位置。 position: 'outside', normal: { textStyle: { color: '#333333' // 设置引导线外层文字描述的颜色 }, // 字符串模板 模板变量有： // {a}：系列名。 // {b}：数据名。 // {c}：数据值。 // {d}：百分比。 formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}', padding: [0, -40], // 设置标签距离引导线水平方向的距离 rich: { aisB1: { color: '#333333', //这里还有其他属性；大家可以去查看 }, aisC1:{ color: '#333333', }, aisD1: { color: '#333333', // 这是数据值的颜色 }, } } },
名称在引导线的上方-使用n
因为是使用的是4.9的版本； 所以设置名称在引导线的上方使用了一点技巧； 那就是换行符 n formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}nn', 名称在引导线的上方-使用labelLayout 需要再5.0以上版本
...其他配置, data:[ 相关数据], // 从 v5.0.0 开始支持 labelLayout:{ // 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。 verticalAlign:'bottom', // 标签在 y 方向上的像素偏移，设置标签在引导线的上方 dy:-4 },
饼状图中间配置一个阴影圆
// 配置里面的圆 { type: 'gauge', center: ['40%', '50%'], // 饼状图的位置 radius: '35%', // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示 // 如果是版本是5，这里可以是360 startAngle: 359.999, endAngle: 0, splitNumber: 4, zlevel: 10, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [ [1, '#fff'] ], width: '100%', shadowColor: '#CDCDCD', //背景阴影颜色 shadowOffsetX: 0, // X偏移量 shadowOffsetY: 0, // Y偏移量 shadowBlur: 10, // 模糊范围 } }, splitLine: { //分隔线样式 show: false, }, axisLabel: { //刻度标签 show: false, }, axisTick: { //刻度样式 show: false, }, detail: { show: false, }, //仪表盘指针。 pointer: { // 不显示仪表盘中的指针 show: false, }, title: { // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。 // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。 offsetCenter: ['0%', "0%"], color: '#999999', }, data: [{ name: "2024-05-09n15:36:25", }] },
全部代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECharts-动画</title> <script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts.js"></script> <!-- <script src="https://cdn.staticfile.net/echarts/5.4.3/echarts.js"></script> --> </head> <div style="width: 780px;height: 400px;" id="box"></div> </body> <script> let myChart = echarts.init(document.querySelector('#box')) // 第一个颜色是从正上方开始的 let option = { tooltip: { trigger: 'item' }, series: [ { //最外部细虚线 // 类型是仪表盘 type: 'gauge', // 位置必须和饼状图的一样，否者设置出来会有偏差 center: ['40%', '50%'], /** * startAngle：仪表盘起始角度。 * 圆心正右手侧为0度，正上方为90度，正左手侧为180度。 * 就是说：逆时针 * */ startAngle: 270, // endAngle：仪表盘结束角度。最初值是：-89.9999, endAngle: -90, // 设置虚线的大小 radius: '75%', // 不要显示刻度，因为仪表盘式有刻度样式的；我们这里只要圆，不要刻度 // 如果设置为 show: true,就会显示刻度样式 axisTick: { show: false }, // false 不显示标签 axisLabel: { show: false }, // 仪表盘刻度的分割段数，这里表现是外层虚线之间的间距 // splitNumber: 65 更加直接的表现是外层有65段虚线 splitNumber: 65, axisLine: { // 不显示仪表盘轴线。如果设置为true,外层虚线就看不见 show: false, // lineStyle：仪表盘轴线样式。 // lineStyle: { // // 仪表盘的轴线可以被分成不同颜色的多段，我们这里始终是同一个颜色 [1, '#E5E6E8'] // color: [ // [0.1, 'red'], // 0~10% 红轴 // [0.2, 'green'], // 10~20% 绿轴 // [0.3, 'blue'], // 20~30% 蓝轴 // ], // width: 10 // } }, // 分隔线样式。 splitLine: { show: true, // 是否显示分隔线。 如果设置为true,外层虚线才能看见 length: 1, // 分隔线与轴线的距离。这里表现是虚线的宽度 lineStyle: { width: 10, // 分隔线线长。支持相对半径的百分比。 color: '#E5E6E8', // 线的颜色 } }, // 仪表盘详情，用于显示数据。 detail: { show: false }, }, // 圆环 { type: 'pie', center: ['40%', '50%'], // 饼状图的位置 /** * radius：饼状图的大小 * 它是一个数组，第1个值表示里面的圆的大小 * 第2个值表示外面的圆的大小 * */ radius: ['45%', '60%'], itemStyle: { normal: { label: { padding: [0, 0], alignTo: 'labelLine' }, color: (list) => { let colorList = [ { "colorStart": "#FF9800", "colorEnd": "#FFD180" }, { "colorStart": "#673AB7", "colorEnd": "#9575CD" }, { "colorStart": "#0F9D58", "colorEnd": "#4CAF50" }, { "colorStart": "#00BCD4", "colorEnd": "#64FFDA" }, { "colorStart": "#E91E63", "colorEnd": "#FF80AB" }, ] return new echarts.graphic.LinearGradient(1, 0, 0, 0, [ { //左、下、右、上 offset: 0, color: colorList[list.dataIndex]["colorStart"], }, { offset: 1, color: colorList[list.dataIndex]["colorEnd"], }, ]); } } }, // 标签的视觉引导线配置 labelLine: { show: true, // 是否显示视觉引导线 length: 20, // 视觉引导线第一段的长度。 length2: 50, // 视觉引导项第二段的长度。 lineStyle: { color: '#E5E6E8', // 这里设置扇线颜色为灰色 width: 1, // 线段宽度 type: 'solid', // 线段类型，默认为实线 } }, // 从 v5.0.0 开始支持 标签的统一布局配置。 labelLayout:{ // 标签垂直对齐方式，可以设置'top', 'middle', 'bottom'。 verticalAlign:'bottom', // 标签在 y 方向上的像素偏移，设置标签在引导线的上方 dy:-4 }, // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 label: { show: true, // 标签的位置。 position: 'outside', normal: { textStyle: { color: '#333333' // 设置引导线外层文字描述的颜色 }, // 字符串模板 模板变量有： // {a}：系列名。 // {b}：名称。 // {c}：数据值。 // {d}：百分比。 formatter: '{aisB1| {b}}, {aisC1| {c}} {aisD1|{d}%}', padding: [0, -40], // 设置标签距离引导线水平方向的距离 rich: { aisB1: { color: '#333333', }, aisC1: { color: '#333333', }, aisD1: { color: '#333333', // 这是数据值的颜色 }, } } }, data: [ { value: 1048, name: '名称1' }, { value: 735, name: '名称2' }, { value: 580, name: '名称3' }, { value: 484, name: '名称4' }, { value: 300, name: '名称5' } ], // 高亮状态的扇区和标签样式 设置饼图外围虚线 emphasis: { // 这里设置悬停时引导线对应名称的颜色，与非悬停时保持一致 label: { color: '#333333' }, labelLine: { // 这里设置悬停时引导线的颜色，与非悬停时保持一致 lineStyle: { color: '#E5E6E8' } } } }, // 配置里面的圆 { type: 'gauge', center: ['40%', '50%'], // 饼状图的位置 radius: '35%', // 如何是版本是4 这里是359.999；不能是360；否则圆环不能正常显示 // 如果是版本是5，这里可以是360 startAngle: 359.999, endAngle: 0, splitNumber: 4, zlevel: 10, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [ [1, '#fff'] ], width: '100%', shadowColor: '#CDCDCD', //背景阴影颜色 shadowOffsetX: 0, // X偏移量 shadowOffsetY: 0, // Y偏移量 shadowBlur: 10, // 模糊范围 } }, splitLine: { //分隔线样式 show: false, }, axisLabel: { //刻度标签 show: false, }, axisTick: { //刻度样式 show: false, }, detail: { show: false, }, //仪表盘指针。 pointer: { // 不显示仪表盘中的指针 show: false, }, title: { // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。 // 可以是绝对的数值，也可以是相对于仪表盘半径的百分比。 offsetCenter: ['0%', "0%"], color: '#999999', }, data: [{ name: "2024-05-09n15:36:25", }] }, ] } myChart.setOption(option); </script> 
