echart 不同颜色(柱状图)
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: DATA.xData,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
name: count
}
],
series: [
{
name: count,
type: 'bar',
barWidth: '60%',
itemStyle: {
normal: {
color: function(params) {
var colorList = ["#3398db", "#434348", "#90ed7d", "#f7a35c", "#61a0a8", "#61a0a8", "#91c7ae", "#2f4554"];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: true,
position: 'top'
}
},
data: DATA.yData
}
]
};
echart 不同颜色(柱状图)的更多相关文章
- vue echart例——柱状图及高度自适应
1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...
- 动态更新echart成交量柱状图,并且不重绘,类似K线的更新方式
function setoption(data) { let dataVolume=volumeChartData; var option = { title: { text: '成交量',// su ...
- 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合
数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echart折线图,柱状图,饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...
随机推荐
- web端安全测试工具
https://www.cnblogs.com/ios9/p/7692373.html 十大web安全扫描工具 扫描程序可以在帮助造我们造就安全的Web 站点上助一臂之力,也就是说在黑客“黑”你之前, ...
- SpringCloud学习成长之路二 服务客户端(rest+ribbon)
在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的. Spring cloud有两种服务调用方式,一种是ribbon+restTemplate,另一种是f ...
- PAT 甲级 1060 Are They Equal (25 分)(科学计数法,接连做了2天,考虑要全面,坑点多,真麻烦)
1060 Are They Equal (25 分) If a machine can save only 3 significant digits, the float numbers 1230 ...
- java中byte数组,二进制binary安装chunk大小读取数据
int CHUNKED_SIZE = 8000; public void recognizeText(byte[] data) throws InterruptedException, IOExcep ...
- Spring的AOP原理
转自 https://www.tianmaying.com/tutorial/spring-aop AOP是什么? 软件工程有一个基本原则叫做“关注点分离”(Concern Separation),通 ...
- 【FFMPEG】I,P,B帧和PTS,DTS时间戳的关系
FFmpeg里有两种时间戳:DTS(Decoding Time Stamp)和PTS(Presentation Time Stamp). 顾名思义,前者是解码的时间,后者是显示的时间.要仔细理解这两个 ...
- Haystack--基于Django的全文检索框架
好文章转载自:https://suguangti.cnblogs.com/p/11167097.html 阅读目录 1.什么是Haystack 2.安装 3.配置 4.处理数据 创建索引 5.设置视图 ...
- GC(Garbage Collection)
GC(Garbage Collection) GC背景 创建对象会消耗内存,如果不回收对象占用的内存,内存使用率会越来越高,最终出现OutOfMemoryError(OOM) 在C++中专 ...
- Idea生成的的第一个eureka注册中心服务器
操作: 1.file->new->project Spring Initializer ->default 点击next 2.输入 Group ...
- EXIT(外部中断)控制实验
实验目的 设计使用外接的按键来作为触发源,使得控制器产生中断,并在中断服务函数中实现控制小灯的亮灭. 按键硬件点路 编程要点 初始化用来产生中断的 GPIO: 初始化 EXTI: 配置 NVIC: 编 ...