今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
 $.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. 我的第一个爬虫程序:利用Python抓取网页上的信息

    题外话 我第一次听说Python是在大二的时候,那个时候C语言都没有学好,于是就没有心思学其他的编程语言.现在,我的毕业设计要用到爬虫技术,在网上搜索了一下,Python语言在爬虫技术这方面获得一致好 ...

  2. Python全栈之路----常用模块----time模块

    time 模块的方法 time.time():返回当前时间的时间戳. >>> import time >>> time.time() #从1974年到现在过去了多少 ...

  3. N阶乘尾部的0个数

    N阶乘尾部的0个数 描述 设计一个算法,计算出n阶乘中尾部零的个数 思路: 1.1 * 2 * 3 * ... * n --> 1 * 2 * 3 * (2 * 2) * 5 * (2 * 3) ...

  4. yaf nginx 设置

    #test1server { listen 80; listen [::]:80; root /vagrant_data/aaa/public; index index.html index.htm ...

  5. [ Codeforces Round #549 (Div. 2)][D. The Beatles][exgcd]

    https://codeforces.com/contest/1143/problem/D D. The Beatles time limit per test 1 second memory lim ...

  6. Cache架构设计

    Cache策略 定时过期策略 定时过期的好处是Cache节点的个数符合实际需求,不会造成资源滥用和服务器压力 定时过期适合访问量较大,实时性要求不高的情况 如果访问量小,定时过期会造成Cache命中率 ...

  7. 嵌入式Linux内核tasklet机制(附实测代码)

    Linux 中断编程分为中断顶半部,中断底半部 中断顶半部: 做紧急,耗时短的事情,同时还启动中断底半部. 中断底半部: 做耗时的事件,这个事件在执行过程可以被中断. 中断底半部实现方法: taskl ...

  8. SVN简单使用

    如果是window操作系统,默认安装.右键菜单就会有显示SVN 如果已经配置好SVN,直接确定既可以检出. 如果没有配置,那么会显示下面的验证: 输入用户名和密码即可

  9. docker-compose 安装redis sentinel,共享主机网络模式

    采坑记录: docker sentinel模式安装完后因为是使用bridge模式,所以只有docker中运行的程序才能访问.刚开始尝试使用端口映射,返现sentinel返回的地址依然是docker的内 ...

  10. ant design + react,自动获取上传音频的时长(react-audio-player)

    在后台管理项目中,用户要求上传音频,并且自动获取音频时长. 第一步, import { Upload, Button, Icon } from 'antd'; 第二步,在表单中使用 Upload 组件 ...