Echarts自定义图形颜色的写法总结

简介: Echarts自定义图形颜色的写法总结

一、官方文档,直接在选项属性中设置。

  color:[ 
    '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', 
    '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', 
    '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', 
    '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' 
],

默认颜色序列,循环使用。

二、在series序列中使用

 itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },


优先顺序,itemStyle>color.


漏刻有时(WWW.LOCKDATA.CN),数据可视化大屏,挖掘大数据背后的价值。

相关文章
|
2月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
2月前
echarts 横纵分割线颜色透明度
echarts 横纵分割线颜色透明度
|
2月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
34 0
|
15天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
32 0
 ECharts 雷达图案例001-自定义节点动画
|
9天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
9天前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
52 0
|
7月前
|
JSON 前端开发 JavaScript
Flask Echarts 实现历史图形查询
Flask前后端数据动态交互涉及用户界面与服务器之间的灵活数据传递。用户界面使用ECharts图形库实时渲染数据。它提供了丰富多彩、交互性强的图表和地图,能够在网页上直观、生动地展示数据。ECharts支持各种常见的图表类型,包括折线图、柱状图、饼图、散点图等,同时还支持动画效果、数据筛选、区域缩放等交互功能。Flask后端通过render_template方法将查询得到的JSON数据传递至前端,使得用户能够查询特定时间段内的数据。这种交互方式实现了动态图形展示,为用户提供了更直观、实时的数据体验。通过此系统,用户可通过前端界面直接选择时间范围,后台服务器相应地返回相应的数据,实现了数据的动态
53 1
Flask Echarts 实现历史图形查询
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
|
8月前
|
JSON 数据格式
Echarts分段折线图图例样式visualMap颜色修改
Echarts分段折线图图例样式visualMap颜色修改
119 1

热门文章

最新文章