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 ...
随机推荐
- iis启动异常 0x80072749
错误提示: “/”应用程序中的服务器错误. 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同 ...
- tp5博客项目实战1
tp5博客项目实战 开发准备:环境wamp,windows系统为例.看实战博客,默认会搭建开发环境并且tp5框架已经至少有一定的基础. tp5的下载与安装 方法一:直接在官网下载拷贝到wamp你的项目 ...
- nginx.conf文件配置明细详解
#etnx运行的用户和用户组 user nginx nginx; #工作进程数,建议设置为CPU的总核数 worker_processes ; #全局错误日志定义类型,日志等级从低到高依次为: #de ...
- 超级块,i节点,数据块,目录块,间接块
一.物理磁盘到文件系统 文件系统用来存储文件内容,文件属性,和目录,这些类型的数据如何存储在磁盘块上的呢?Unix/linux使用了一个简单的方法. 他将磁盘分为3个部分: 超级块,文件系统中第一个块 ...
- 25.Spark下载源码和安装和使用
安装scala 上传安装包 解压 配置scala相关的环境变量 export SCALA_HOME=/opt/modules/scala-2.11.4 export PATH=$PATH:$SCALA ...
- 【转帖】一文看懂docker容器技术架构及其中的各个模块
一文看懂docker容器技术架构及其中的各个模块 原创 波波说运维 2019-09-29 00:01:00 https://www.toutiao.com/a6740234030798602763/ ...
- windows使用sqlpus连接oracle 数据库
1.先安装好Instant Client程序. 2.打开cmd 执行sqlplus命令,如果出现如下图 2.说明需要把oracle install 的bin目类 添加系统环境path中,如下图添加环境 ...
- 第2章:LeetCode--第二部分
本部分是非Top的一些常见题型及不常见题 LeetCode -- Longest Palindromic Substring class Solution { public: int isPalind ...
- TiDB部分
TiDB部分 https://blog.csdn.net/D_Guco/article/details/80641236 https://www.v2ex.com/t/508094 https://u ...
- redis键的迁移操作
1.redis单个实例内多库间的数据迁移操作 命令名称:move 语法:move key db 功能:将当前数据库的key移动到给定的数据库db当中.如果当前数据库(源数据库)和给定数据库(目标数据库 ...