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%" ...
随机推荐
- Power BI和 Visio 集成优缺点
Power BI 的 Visio 自定义视觉,这个功能是非常值得让人兴奋的,小悦相信这是一个非常重要的开发,不仅适用于 Visio,也适用于Power BI.现在已经有越来越多的可视化,它们以更简洁的 ...
- linu下未编译的mysql安装包
wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.21.tar.gz
- PAT 乙级 1089 狼人杀 && 1090 危险品装箱 (我的时间最短哦)
1 1089的点在注释里面,核心就是遍历任意两个人说谎,看结果是否满足题目要求 2 1090 是一道好题目, 考虑到了时间复杂度 通常想法是看清单中每一个物品 是否存在与其不能存放的物品 那么复杂 ...
- day06python 哈希 字典集合嵌套
1.hash算法 hash算法 :内存中将值进行hash算法得到一个数值存储在内存中,查找也会按照算法进行查找,使用hash算法 执行效率高相对于list的索引查找 (字典,集合):使用的是hash查 ...
- CodeForces - 13E
Little Petya likes to play a lot. Most of all he likes to play a game «Holes». This is a game for on ...
- 快速排序的两种实现 -- 种轴partition : 比值partition(更精巧)
实现1:种轴partition,not in place--取定枢轴,将小于等于枢轴的放到枢轴左边,大于枢轴的放到右边 # python algorithm en_2nd edition p125de ...
- 全志A33 lichee怎样编译镜像
对于全志A33 lichee编译镜像文件需要先搭建好交叉编译环境,这个搭建环境可以看之前的文档 "SINA33开发板怎样创建编译环境" 开发平台 * 芯灵思SinlinxA33开发 ...
- Centos7 下安装VMware tools
1:先在虚拟机点击安装VMware Tools 2:然后挂载 mount /dev/cdrom /mnt 3:进入/mnt,可以看到有 4:拷贝VMwareTools到其他 ...
- 解决centos 7.5安装openvpn,mirrors.163.com提示没有可用软件包openvpn、easy-rsa问题
提示: yum install openvpn 已加载插件:fastestmirror Loading mirror speeds from cached hostfile * base: mirro ...
- 第六届蓝桥杯省赛 java三羊献瑞
将文字看作一个个变量.根据一开始确定的文字的值进行暴力循环. 三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 + 三 羊 献 瑞------------------- 三 羊 生 瑞 气 (如果有对齐 ...