今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
 $.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 饼状图自定义颜色的更多相关文章

  1. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  2. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  3. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  4. ECharts饼状图添加事件

    和柱状图添加事件没有区别,详情如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  5. vue+element+echarts饼状图+可折叠列表

    html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...

  6. echarts 饼状图 改变折线长度

    $(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...

  7. echarts 饼状图

    说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4  c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...

  8. Echarts饼状图

    <head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...

  9. echarts饼状图位置设置

    series: { name: "流量占比分布", type: "pie", radius: ["40%", "60%" ...

随机推荐

  1. ecmall 学习记录3

    1.在ecmall.php 中 336行有一个函数 function lang_file($file) { return ROOT_PATH . '/languages/' . LANG . '/' ...

  2. 深入理解Java中的同步静态方法和synchronized(class)代码块的类锁

    一.回顾学习内容 在前面几篇博客中我我们已经理解了synchronized对象锁.对象锁的重入.synchronized方法块.synchronized非本对象的代码块, 链接:https://www ...

  3. JAVA高级篇(二、JVM内存模型、内存管理之第一篇)

    JVM内存结构如 Java堆(Heap),是Java虚拟机所管理的内存中最大的一块.Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实 ...

  4. InstallShield-常用prq文件的下载地址

    VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...

  5. js 跨域问题

    Cross-Origin Resource Sharing 跨域资源共享 Cross-Origin Resource Sharing,跨域资源共享,简称 CORS.CORS系统定义了一种浏览器和服务器 ...

  6. java库中具体集合

    ArrayList 一种可以动态增长和缩减的索引序列 LinkedList 一种可以在任何位置进行高效地插入和删除操作的有序序列 ArrayDeque  一种用循环数组实现的双端队列 HashSet ...

  7. PTA寒假三

    抓老鼠啊~亏了还是赚了? (20 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C ...

  8. enumerate 模块

    import os list1 = ['a','b','c'] for index,aph in enumerate(list1) #把可遍历对象的数据以及其索引取出分别赋值给index,aph pr ...

  9. 乐乐课堂_leleketang.com

    乐乐课堂_leleketang.com https://www.baidu.com/sf?pd=video_page&sign=12394301609542619800&word=抛物 ...

  10. Java day1

    1. 学习java,首先是jdk的安装,JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+ ...