Echarts实战案例代码(42):饼图不同区域的渐变实现的解决方案

简介: Echarts实战案例代码(42):饼图不同区域的渐变实现的解决方案

颜色数组

var colorList_data_2 = [{
        c1: ' #9966ff', //实践
        c2: '#ff66ff'
    },
    {
        c1: '#ff3366', //操作
        c2: '#ff6699'
    },
    {
        c1: '#ff6666', //操作
        c2: '#ffcc66'
    }
]


option设置

        itemStyle: {
            normal: {
                color: function(params) {
                    var colorList = colorList_data_2
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        offset: 0,
                        color: colorList[params.dataIndex].c1
                    }, {
                        offset: 1,
                        color: colorList[params.dataIndex].c2
                    }])
                    /*  return colorList[params.dataIndex]*/
                }
            },
            emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }


Done!

相关文章
|
4天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
4天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
4天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
4天前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
190 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
6月前
Echarts饼图之-玫瑰图数据交互
Echarts饼图之-玫瑰图数据交互
44 0
|
6月前
echarts饼图点击区块事件
echarts饼图点击区块事件
30 0
|
6月前
|
JSON 数据格式
Echarts饼图实现颜色渐变
Echarts饼图实现颜色渐变
115 0
|
6月前
|
JSON 数据格式
ECharts加载json数据解决方案
ECharts加载json数据解决方案
41 0
|
6月前
ECharts 饼图指定颜色显示
ECharts 饼图指定颜色显示
72 0
|
4天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0