Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
$.ajax({
url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx",
data: { method: "QuanShiDuanMianShuiZhiLeiBieTongJi" },
dataType: "json",
cache: false,
success: function (data) {
if (data.length > 0) {
echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({
legend: {
orient:'vertical',
left:'left',
data: ['II', 'III', 'IV', 'V', '劣V']
},
series: {
left:'center',//离容器左侧的距离
top: 'top',//距离容器上测的距离
center: ['50%', '50%'],
radius: '85%',
type: 'pie',
data: [
{ name: 'II', value: data[0].CNT },
{ name: 'III', value: data[1].CNT },
{ name: 'IV', value: data[2].CNT },
{ name: 'V', value: data[3].CNT },
{ name: '劣V', value: data[4].CNT },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color:function(params) {
//自定义颜色
var colorList = [
'#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
];
return colorList[params.dataIndex]
}
}
}
}
});
}
}
});
效果图

Echarts 饼状图自定义颜色的更多相关文章
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- ECharts饼状图添加事件
和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
- echarts 饼状图
说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4 c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...
- Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
- echarts饼状图位置设置
series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...
随机推荐
- 关于Jordan标准形
[转载请注明出处]http://www.cnblogs.com/mashiqi 2017/06/25 设$A$是$n$维线性空间$V$上的线性变换,它的特征值与相应的代数重数分别为$\lambda_i ...
- 深入理解Java中的同步静态方法和synchronized(class)代码块的类锁
一.回顾学习内容 在前面几篇博客中我我们已经理解了synchronized对象锁.对象锁的重入.synchronized方法块.synchronized非本对象的代码块, 链接:https://www ...
- JAVA高级篇(二、JVM内存模型、内存管理之第一篇)
JVM内存结构如 Java堆(Heap),是Java虚拟机所管理的内存中最大的一块.Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实 ...
- 【坑】https证书链不完整的坑
支付宝支付回调https失败,微信分享https连接在微信里打开空白,而chrome等浏览器访问正常. 是的,以上问题我作为半个运维在项目中遇到了,就是由于https证书链不完整引起的. 好吧,其实压 ...
- ubuntu 16 阿里云 vsftpd
1.安装 apt-get install vsftpd 2.配置 conf vim /etc/vsftpd.conf --禁止匿名用户sed -i "s/anonymous_enable=Y ...
- Linux源码安装软件
Linux环境下 源码编译安装软件 ==== 1. 下载,步骤略 ==== 2. 验证,部分官方下载同时提供签名,MD5,sha1,sha256等校验信息. $ gpg --verify gnupg- ...
- 再见了我热爱的ACM赛场
随着2017EC-Final结束,我的ACM生涯也真正结束了,区域赛三铜三银三金,没有打铁,对我来说算是很满足了. 为什么打了ACM?我记得进入大学之后大概认真上课两三周,我就开始对大学讲课失望,开始 ...
- 爬虫之PyQuery
PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎完全相同. 官方文档:http://pyquery.readthedocs.io/ 安装 pip insta ...
- Windows10右键添加"在此处打开命令窗口"
添加注册表: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\OpenCmdHere] @=" ...
- 队列&广搜
搜索里有深搜,又有广搜,而广搜的基础就是队列. 队列是一种特殊的线性表,只能在一段插入,另一端输出.输出的那一端叫做队头,输入的那一端叫队尾.是一种先进先出(FIFO)的数据结构. 正经的队列: 头文 ...