echarts颜色设置

示例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'), 'dark'); // dark 可尝试修改为 lightmyChart.setOption({series : [{name: '访问来源',type: 'pie',    // 设置图表类型为饼图radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。data:[          // 数据数组，name 为数据项名称，value 为数据项值{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}]})</script>
</body>
</html>

初始化echarts是可添加背景颜色dark/light
或者引入主题文件
若要修改单一颜色在series中添加color:[’’]
示例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));myChart.setOption({series : [{// 此系列自己的调色盘color: ['#ff0000','#00ff00', '#0000ff', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],name: '访问来源',type: 'pie',radius: '55%',data:[{value:235, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:335, name:'直接访问'},{value:400, name:'搜索引擎'}]}]})</script>
</body>
</html>

选中高亮：
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: ‘red’
},
label: {
show: true,
// 高亮时标签的文字
formatter: ‘高亮时显示的标签内容’
}

echarts颜色设置相关推荐

Echarts颜色设置，好看的小清新配色
只需要在option中加入color属性: color: ['#75bedc', '#ef6567', '#91cd77', '#f9c956', '#5470c6'], 对于饼图配置完整代码: op ...
echarts地图设置legend_echarts设置图例颜色和地图底色的方法实例
导读热词前言本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些s ...
Echarts字体和线条颜色设置操作笔记
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否 ...
echarts 极坐标设置分隔区域颜色
echarts 极坐标设置分隔区域颜色借用echarts 官网上的一个极坐标案例,如下图实现如下图的效果,在y轴上每一段设置颜色,形成渐变背景效果设置代码: radiusAxis: {split ...
echarts 饼图的一种---南丁格尔玫瑰图按照百分比大小进行排序以及颜色设置的两种方式（普通设置颜色和渐变色设置）
本篇博文是记录一下我在开发过程中遇到的一个问题,那就是对于南丁格尔玫瑰图(或者饼图)如何根据百分比大小进行排列,可以很直观的看出数据高低. 首先给大家展示一下官方的样式,具体代码可以去官网上查看:ht ...
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
Echart颜色设置
最近在做的项目用到Echarts,由于客户对图表颜色的要求,找了很多资料,终于对柱状图,饼图,仪表盘图的颜色设置有了一个了解,供大家参考学习. Echarts配置项手册:http://echarts. ...
iOS开发技巧（系列十八：扩展UIColor，支持十六进制颜色设置）
新建一个Category,命名为UIColor+Hex,表示UIColor支持十六进制Hex颜色设置. UIColor+Hex.h文件, #import <UIKit/UIKit.h> # ...

echarts颜色设置

echarts颜色设置相关推荐

最新文章

热门文章