Echarts根据数据长度变换柱状图柱状的颜色
//查询图表数据
function GetData() {
var qs = $("#qs").val();
var js = $("#js").val();
$.ajax({
url: '/YCGL_YCYSJLHIS/GetErrorOperate',
type: 'GET',
data: {
qs: qs,
js:js
},
async: false,
success: function (data) {
var Person=[], OperateC=[];
for (var i = 0; i < data.length; i++) {
Person.push(data[i].Person);
OperateC.push(data[i].OperateC);
};
Person.push();
initEchart(Person, OperateC);
},
error: function () {
alert("获取图表数据失败!");
}
});
};
//初始化图表
function initEchart(Person, OperateC) {
var myChart = echarts.init(document.getElementById('middle'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异常操作情况统计分析'
},
tooltip: {},
legend: {
data: ['操作次数']
},
xAxis: {
name: '操作人',
data: Person
},
yAxis: {
name: '操作次数'
},
series: [{
name: '操作次数',
type: 'bar',
barWidth: 30,
//label: {
// normal: {
// show: true,
// position: 'inside'
// }
//},
itemStyle: {
//通常情况下:
normal: {
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params) {
var index_num = params.value;
for (var i = 0; i < OperateC.length; i++) {
//判断数据是否大于1
if (index_num > 1) {
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
//return colorList[params.dataIndex];
return '#ff7f50';
}
else {
//var colorList = ['blue'];
//return colorList[params.dataIndex];
return '#87cefa';
}
}
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: OperateC
}
]
});
};
Echarts根据数据长度变换柱状图柱状的颜色的更多相关文章
- HighChart 实现从后台取数据来实时更新柱状和折线组图
前段时间公司让弄图表,给我说有HighCharts这个js插件,于是上网上搜,由于本人是写后端的,对于JavaScript和jQuery不是很熟悉,虽然找到了模板,但是还是不明白,所以一点一点的改,但 ...
- echarts柱状图,改变柱状颜色
在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [ { name:'天数', type:'bar', stack: '天', data ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图,散点图和柱状图)
Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...
- Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题
今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:
- 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- echarts系列之动态修改柱状图颜色
echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...
- Echarts 学习系列(3)-Echarts动态数据交互
写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...
- ECharts – 大数据时代,重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
随机推荐
- How To Improve Deep Learning Performance
如何提高深度学习性能 20 Tips, Tricks and Techniques That You Can Use ToFight Overfitting and Get Better Genera ...
- Java 实验案例(类和对象篇)
实验任务 任务一:手机类的封装 任务二:基于控制台的购书系统 任务三:简单的投票程序 实验内容 任务一:手机类的封装 任务目的 理解和掌握面向对象的设计过程 掌握类的结构和定义过程 掌握构造方法及其重 ...
- Sink Prosessor - Flume的可靠性保证:故障转移、负载均衡
Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...
- ahjesus Axure RP 8.0注册码,亲测可用
ahjesus Axure RP 8.0注册码 ahjesus Axure RP 8.0注册码 用户名:aaa注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7F ...
- 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio
本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...
- 使用 Azure CLI 管理 Azure 磁盘
Azure 虚拟机使用磁盘来存储 VM 操作系统.应用程序和数据. 创建 VM 时,请务必选择适用于所需工作负荷的磁盘大小和配置. 本教程介绍如何部署和管理 VM 磁盘. 学习内容: OS 磁盘和临时 ...
- C#实现字符串计算
借用DataTable的Compute函数进行计算. string formula = "1+1*4/3+23*(1+2)"; DataTable dt = new DataTab ...
- MySql EF6 DBFirst 向导无法生成 edmx 解决方法(同:您的项目引用了最新实体框架;但是,找不到数据链接所需的与版本兼容的实体框架数据库提供程序)
使用 MySql EF6 DBfirst 生成模型时经常会遇到EF6模式无法选择的情况究其原因, 还是因为没有正确的使用 Connector/Net. 下面说一下使用方法. 使用 MySql DBFi ...
- 利用skipList(跳表)来实现排序(待补充)
用于排名的数据结构 一般排序为利用堆排序(二叉树)和利用skipList(跳表)的方式 redis中SortedSet利用skipList(跳表)来实现排序,复杂度为O(logn),利用空间换时间,类 ...
- 使用 libffi 实现 AOP
核心还是利用oc消息的查找派发机制,进行类结构的动态修改,用新函数替换老函数,然后再调用老函数. 前言 众所周知,使用runtime的提供的接口,我们可以设定原方法的IMP,或交换原方法和目标 ...