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 ...
随机推荐
- poi导出excel2007版本
/** * 导出excel2007版本 * * @param titles * 表头集合 * @param sheetNames * sheet名称 * @param datas * 数据集合 * @ ...
- Java基础教程:IDEA单元测试
Java基础教程:IDEA单元测试 环境配置 使用idea IDE 进行单元测试,首先需要安装JUnit 插件. 安装JUnit插件步骤 File-->settings-->Plguins ...
- C,OC,C++语言对比
1.C与OC.C++的区别: C语言的特点:面向过程 1)C语言是结构化语言,层次清晰,调试和维护比较容易 2)表现能力和处理能力比较强,可直接访问内存的物理地址 3)c语言实现对硬件的编辑,c语言课 ...
- Azure Web应用相关设置
这里用来记录自己在工作中,在Azure Web应用中用到的配置 设置NodeJS版本 Azure Web应用默认的NodeJS版本是0.10.4,这个版本太低,不能满足实际的需要 参照下图修改,根据自 ...
- Mac brew命令踩坑
brew是mac上的在线包管理软件,相当于linux apt以及yum包管理工具 1.取消brew的自动更新(https://blog.csdn.net/yf9595/article/details/ ...
- jqGrid获取展示的所有行id集合
$("#jqGrid").getDataIDs();
- jqGrid通过行id获取行对象
$("#jqGrid").jqGrid('getRowData',rowid);
- shell将txt转换为csv
cat aa.txt | tr -s '[:blank:]' ',' > bb.csv
- 了解 DML、DDL、DCL
一.DML DML(Data Manipulation Language)数据操纵语言: 最经常用到的 SELECT.UPDATE.INSERT.DELETE. 主要用来对数据库的数据进行一些操作 S ...
- Docker下搭建mongodb副本集
背景 有需求需要对mongodb做一个容灾备份.根据官网,发现mongodb最新版本(4.0)已经抛弃了主从模式而采用副本集进行容灾.副本集的优势在于:"有自动故障转移和恢复特性,其任意节点 ...