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%" ...
随机推荐
- 文本对齐方式(text-align)
text-align 设置元素内文本的水平对齐方式. 属性值:left.right.center.justify 注:该属性对块级元素设置有效.
- 初见 fultter for MAC
第一步:下载flutter https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 第二步:(development ...
- 一台服务器绑定多个ip地址
一台服务器绑定多个ip地址. 方法一: 使用标准的网络配置工具(比如ifconfig和route命令)添加lP别名: 在eth0网卡再绑定一个ip:192.168.101.103 /sbin/ifco ...
- idea常用的快捷键
psvm,快速生存main类 快速生成main类: " public static void main(String[] args) {}",十分常用. 2 sout ,快捷生成输 ...
- 19/03/30Python笔记
一.三元运算 a = 1 if (条件) else a = 2 #如果条件成立,a = 1,否则a = 2 二.文件的处理 1.读取 f = open("user.txt",&qu ...
- ex_BSGS
//author Eterna #define Hello the_cruel_world! #pragma GCC optimize(2) #include<iostream> #inc ...
- 网络ping不通原因总结
1.检查主机是否在线,硬件是否连接好 2.查看ip地址是否输入正确 3.查看是否防火墙拦截,如果有拦截关闭防火墙 4.两台电脑是否接入同一局域网(WiFi也是)
- Go Example--自定义排序
package main import ( "fmt" "sort" ) //定义类型别名 type ByLength []string func (s ByL ...
- Android 异步下载
package com.example.demo1; import java.io.File; import java.io.FileOutputStream; import java.io.IOEx ...
- java_GC
垃圾回收1 内存分配 垃圾回收 调用垃圾回收器 对象终结 调用垃圾回收器 System.gc()和Runtime.getRuntime(). ...