今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码
 $.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. 535种使用JavaScript重新加载页面的方法

    除了location = location之外还有534中方法重新加载页面 location = location location = location.href location = window ...

  2. SQL-存储过程-010

    什么是存储过程? 可以理解为数据库中的方法,与C#中的方法一样,具有参数和返回值: 存储过程的优点? 提高运行速度:存储过程在创造是进行编译,以后运行存储过程都不需要再进行编译,极大化的提高了数据库的 ...

  3. switch留个爪,之后还需要再研究下

    public class SwitchDemo { public static void main (String [] args) { for(int i = 0; i < 10; i++) ...

  4. centos安装tomcat步骤

    1.官网或wget下载apache-tomcat-8.5.9.tar.gz: cd /home/tar wget xxxxxxxxxx cp /home/tar/apache-tomcat-8.5.9 ...

  5. 国内优秀MVC开源框架jfinal简介

    JFinal简介 JFinal 项目开发始于2011年初,作者詹波(James Zhan)曾任搜格信息技术有限公司Java架构师,北京信息管理科学研究所CTO,现任微格网际(北京)科技有限公司联合创始 ...

  6. 使用MSF生成shellcode

    使用MSF生成shellcode payload和shellcode的区别 Payload是是包含在你用于一次漏洞利用(exploit)中的ShellCode中的主要功能代码.因为Payload是包含 ...

  7. python __name__ 和__main__的使用领悟

    __name__和__main__的使用 #hello.pydef sayHello(): str="hello" print(str); if __name__ == " ...

  8. 用jquery得到select选中的值

    <select class="pushtype" name="push_type" onchange="pushType(this)" ...

  9. 剑指offer 1.数组 二维数组中查找

    题目描述 在一个二维数组中(每个一维数组的长度相同), 每一行都按照从左到右递增的顺序排序, 每一列都按照从上到下递增的顺序排序. 请完成一个函数, 输入这样的一个二维数组和一个整数,判断数组中是否含 ...

  10. TF(3): 安装部署_Windows

    CUDA: CUDA(Compute Unified Device Architecture): CUDA™是一种由显卡厂商NVIDIA推出的通用并行计算架构,该架构使GPU能够解决复杂的计算问题. ...