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!

相关文章
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
153 1
|
2月前
|
数据格式
ECharts 饼图
本章节我们将绘制饼图。
56 15
|
1月前
|
XML 前端开发 数据库
echarts饼图前后端代码SpringCloud+Vue3
echarts饼图前后端代码SpringCloud+Vue3
32 0
|
3月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
132 0
|
5月前
|
开发者 容器
Echarts饼图实现-今日进度-动态图
构建一个动态旋转的ECharts饼图,包括渐变色和动画效果。初始化ECharts实例,设置图表尺寸和背景,配置标题、颜色、系列数据及自定义渲染。利用`renderItem`绘制弧线和圆点,`getCirlPoint`计算坐标。通过`setInterval`和`draw`函数实现旋转动画。完整代码可在链接下载。
119 0
Echarts饼图实现-今日进度-动态图
|
5月前
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
50 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
373 0
|
5月前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
5月前
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
5月前
|
Serverless 开发者 容器
Echarts饼图-今日进度-动态图
构建一个动态饼图,采用ECharts,背景为蓝色科技风,有星球转动效果。通过`echarts.init`初始化,设置图表尺寸和背景色,配置`option`对象含标题、颜色等。利用`series`定义渐变色并自定义渲染,通过`renderItem`绘制弧线和圆点。`getCirlPoint`函数计算坐标,`draw`函数更新角度实现动画。代码包括图表初始化、系列配置、动画逻辑等关键部分。完整代码可在链接处下载。
67 0

热门文章

最新文章