echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加
可以参考：
https://echarts.baidu.com/echarts2/doc/example.html
https://echarts.baidu.com/echarts2/doc/doc.html#LineStyle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
哈哈哈
<div id="chartmain" style="width:600px; height: 400px;"></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script> option = {
title: {
//标题相对x、y轴的位置
x: 'center',
y: 'bottom',
text: 'ECharts例子个数统计',
subtext: 'Rainbow bar example',
link: 'http://echarts.baidu.com/doc/example.html'
},
// 鼠标滑过柱状图显示值
tooltip: {
trigger: 'item'
},
// 右上角工具按钮
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [
{
type: 'category',
//x轴不显示(在鼠标滑过时，会显示在值前面)
show: false,
data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel']
}
],
yAxis: [
{
type: 'value',
show: false
}
],
series: [
{
name: 'ECharts例子个数统计',
type: 'bar',
//定义每个bar的颜色和其上是否显示值
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
//定义一个颜色集合
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
//对每个bar显示一种颜色
return colorList[params.dataIndex]
},
label: {
//每个bar的最高点值显示在bar顶部
show: true,
position: 'top',
//值和x轴分类的显示格式(这里是换行显示)
formatter: '{b}\n{c}'
}
}
},
data: [12,21,10,4,12,5,6,5,25,23,7],
markPoint: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
formatter: function(params){
return '<img src="'
+ params.data.symbol.replace('image://', '')
+ '"/>';
}
},
data: [
{xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'},
{xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'},
{xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'},
{xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'},
{xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'},
{xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'},
{xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'},
{xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'},
{xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地图.png'},
{xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'},
{xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
]
}
}
]
}; //初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</html>
效果：
上面是普通柱状图每个bar显示不同颜色的方法。
-------------------------------------------------------------------------------------------------------
下面是分组柱状图，
不同图例类型显示不同 自定义颜色 的设置方法 ，还包含 辅助线：平均线 的设置方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
哈哈哈3
<div id="chartmain" style="width:600px; height: 400px;"></div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script>
//调用画图表方法
drawGroupChart("chartmain"); //定义画分组柱状图方法
function drawGroupChart(domId){ var title = "嘿嘿1";
var xA = ['周一', '周二', '周三', '周四'];
var legendData = ['百度', '谷歌', '必应']; //[620, 732, 701, 734] 是x轴上每一组bar上的第一个柱子的数据的值的集合
//[120, 132, 101, 134] 是x轴上每一组bar上的第二个柱子的数据的值的集合
//所以，每一个小集合中数据的顺序都要和xA中的数据顺序对应，整个大集合中数据的顺序要和legendData对应
var dataList = [[620, 732, 701, 734],[120, 132, 101, 134],[60, 72, 71, 74, 190]]; //定义一个颜色集合
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
]; //定义ss容器
var ss = []; //生成数据
$.each(legendData,function(i,v){
//定义一个对象
var o = {
name:v,
type: 'bar',
data: dataList[i], //定义每一类bar的颜色和其上是否显示值(如果不定义itemStyle属性，会按照echarts中的默认颜色配置)
itemStyle: {
normal: {
color: function(params) {
// return colorList[params.dataIndex] //对每个bar（对分组bar图就是每一组）（即按照x轴中的每个元素）显示一种颜色
return colorList[i] //对每一类bar（按照legendData中的每个元素）显示一种颜色
},
label: {
//每个bar的最高点值显示在bar顶部
show: true,
position: 'top',
//值和x轴分类的显示格式(这里是换行显示)
formatter: '{b}\n{c}'
}
}
}, //增加辅助线 这里是 平均线
markLine: {
//平均线两端的起始点和样式,这里none为没有样式(比如箭头)
symbol: 'none',
data: [{
type: 'average',
name: '平均值'
}],
//具体每一条平均线及其名称的显示样式
itemStyle: {
normal: {
//线的样式
lineStyle:{
//线的颜色,这里和 legendData 一致
color: colorList[i]
},
//辅助线的名字和值得显示方式
label: {
show: true,
// position: 'left',
//data中name和type值的显示格式(这里\n是换行显示)
// formatter: '{b}\n{c}' //{b}代表name,这里是"平均值" ;{c}代表具体的数值如"568"
formatter: '{b}' //只显示 "平均值"三个字
}
}
},
},
}; //将生成的数据添加到容器中
ss.push(o);
}); //拼装 option
var option = {
title:{text:title},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: legendData
},
xAxis: [{
type: 'category',
data: xA
}],
yAxis: [{
type: 'value'
}],
series: ss
/* [
{
name: '百度',
type: 'bar',
data: [620, 732, 701, 734],
},
{
name: '谷歌',
type: 'bar',
data: [120, 132, 101, 134],
},
{
name: '必应',
type: 'bar',
data: [60, 72, 71, 74, 190]
}
] */
};
//初始化echarts实例
//var myChart = echarts.init(document.getElementById('chartmain'));
var myChart = echarts.init(document.getElementById(domId));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
} </script>
</html>
结果样式：
echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加的更多相关文章
- echarts柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
- ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。
1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...
- echarts之--柱状图-%显示
测试地址 https://www.echartsjs.com/examples/zh/editor.html?c=bar-tick-align var option = { title: { text ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- Echarts按需引入后没有显示图例问题
因为Echarts官网的例子都是引入整个Echarts.js.如果使用按需引入对应模块就要记得引入legend模块,才能显示出图例. 例如这样: require("echarts/lib/c ...
- winform中dataGridView隔行显示不同的背景色，鼠标移动上显示不同颜色，离开后变回原色
winform中dataGridView隔行显示不同的背景色,鼠标移动上显示不同颜色,离开后变回原色 先设置奇数行颜色,这个有个自带的属性AlternatingRowsDefaultCellStyle ...
- python: HTML之 鼠标放上去下拉项字体显示不同颜色
鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
- 设置UIButton中的文字和图片，设置UILabel的文在显示不同颜色
UIButton: UIEdgeInsets 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets.imageEdgeInsets ...
随机推荐
- init命令详解
基础命令学习目录首页 1.手动输入命令会执行相关操作 #init 0 - 停机(千万不能把initdefault 设置为0 ) #init 1 - 单用户模式 #init 2 - 多用户, ...
- C# Js 时间格式化问题
C# 后台: .ToString("dd-MMM-yyyy", System.Globalization. DateTimeFormatInfo.InvariantInfo) eg ...
- 作业 20181127-3 互评Beta版本
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2448 组名:可以低头,但没必要 组长:付佳 组员:张俊余 李文涛 孙赛佳 ...
- 第33次Scrum会议(11/21)【欢迎来怼】
一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/11/21 11:35~11:57,总计22min.地点:东北 ...
- 团队项目之开题scrum meeting
scrum meeting 会议记 一.会议要点: 1.确定成员角色: 2.讨论关于项目的疑问: 3.制定一周内成员任务. 二.具体会议内容: 1.成员角色: PM:杨伊 Dev:徐钧鸿 刘浩然 张艺 ...
- 团队项目-NABCD
用户需求分析与NABCD 模拟经营类(SIM)游戏:玩家模拟经营一家软件公司,平台初步定为Android. Need需求 任何一款游戏都要有自己的定位和目标群体,这些 iiMediaResearch数 ...
- 20172325 2017-2018-2 《Java程序设计》第五周学习总结
20172325 2017-2018-2 <Java程序设计>第五周学习总结 教材学习内容总结 1.布尔表达式的值只有真或假,表达式的结果决定了下一步将要执行的语句. 2.循环语句可以用在 ...
- 《Spring1之第七次站立会议》
<第七次站立会议> 昨天:我把自己项目工程里的服务器端界面进行了优化和完善. 今天:我查找了关于实现视频功能的相关代码. 遇到的问题:找到的都是基于C#的相关代码,很难找到用java实现的 ...
- oracle 语句之对数据库的表名就行模糊查询，对查询结果进行遍历，依次获取每个表名结果中的每个字段(存储过程)
语句的执行环境是plsql的sql窗口, 语句的目的是从整个数据库中的所有表判断 不等于某个字段的记录数 . 代码如下: declare s_sql clob:=''; -- 声明一个变量,该变量用于 ...
- java中的装箱与拆箱
什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = ...