今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
 $.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. Linux 查看端口被什么程序占用

    lsof -i:8899 输出: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 38889 root 329u IPv6 5883661 ...

  2. [转]C++11 左值、右值、右值引用详解

    https://blog.csdn.net/hyman_yx/article/details/52044632 左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡 ...

  3. linux ipv6开启的配置文件

    1./etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0TYPE=EthernetUUID=9d1d6e2a-cfc5-4e60-8f28-b77 ...

  4. iOS tableView分割线高度自定义

    1.系统自带的集中分割线的形式 myTableView.separatorStyle=UITableViewCellSeparatorStyleNone;(这个是去掉所有分割线)可以通过这个来设置 2 ...

  5. c# 如何 使用共用体

    用起来真的方便 转摘如下: C#借助FieldOffset属性实现共用体与强制类型转换 这两天被C#的强制类型转换弄得有点不习惯.事出如此. 在C#中,我打算读二进制文.文件的结构很简单,一连串的紧密 ...

  6. Linux 测试常用命令

    ls :列出文件 ls -l ls -t  按时间排序 ls -rt 按时间倒序 ls -a  列出所有文件(包括隐藏的) ll : ll = ‘ls -l ’ cd: 进入文件目录 cd 不带目录名 ...

  7. vs+qt 运行过程出现cannot run rc.exe

    刚开始,我按照网上的一堆教程在qt creator中设置了各种东西,设置完以后,运行时出现cannot run rc.exe,根据百度,将C:\Program Files (x86)\Windows ...

  8. PythonStudy——字符串扩展方法 String extension method

    ')) ')) print('***000123123***'.lstrip('*')) print('***000123123***'.rstrip('*')) print('华丽分割线'.cent ...

  9. PythonStudy——字符串重要方法 String important method

    # 1.索引(目标字符串的索引位置) s1 = '123abc呵呵' print(s1.index('b')) # 2.去留白(默认去两端留白,也可以去指定字符) s2 = '***好 * 的 *** ...

  10. oracle错误汇总1

    这是遇见的第一个整个库正常,但某张表查询报错的情况 某张表数据可以查,但一排序查就报错 select * from acct_daily_bak; select * from acct_daily_b ...