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 ...
随机推荐
- 34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码
加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 以下列出的是本课涉及的文件. RegisterFirst.dart import 'package:flutter/ ...
- 处理线上CPU负载过高的故障现象
如何处理线上CPU100%的故障现象 处理流程: 1.登陆线上机器top命令,查看耗费cpu的进程号,举例来说发现进程24008持续耗费资源 2.top -Hp 24008去查看持续耗费cpu的线程号 ...
- AFNetWorking实现参数以body传输请求数据
/** * 异步POST请求:以body方式,支持数组 * * @param url 请求的url * @param body body数据 * @param success 成功回调 * @para ...
- 【动手学深度学习】Jupyter notebook中 import mxnet出错
问题描述 打开d2l-zh目录,使用jupyter notebook打开文件运行,import mxnet 出现无法导入mxnet模块的问题, 但是命令行运行是可以导入mxnet模块的. 原因: 激活 ...
- 解决访问github等网站慢或下载失败的问题
最近老大push项目,正常的git clone每次都是下载一部分就断掉了.下面介绍网上找到的两种方法: 方法一: 1.打开网站https://www.ipaddress.com/: 2.分别在上面打开 ...
- 【c# 学习笔记】使用virtual和override关键字实现方法重写
只有基类成员声明为virtual或abstract时,才能被派生类重写:而如果子类想改变虚方法的实现行为,则必须使用override关键字. public class Animal { private ...
- Xena L23网络测试仪Valkyrie使用技巧100例:使用Xena官方在线演示设备 (编号00)
需求# 1.新用户:没有硬件,想看看软件长什么样,好不好用,风格如何,怎么办? 2.代理商:没有硬件,想给客户Show一下Xena高大上的软件,怎么办? 3.老用户:邮件推送了新的软件版本,据说很多新 ...
- IntelliJ IDEA 联想代码
- kubernetes 部署ingress
kubernetes Ingess 是有2部分组成,Ingress Controller 和Ingress服务组成,常用的Ingress Controller 是ingress-nginx,工作的原理 ...
- 在VMware Workstation10下CentOS7虚拟机中创建与主机共享文件夹的详细步骤
一.前言 在使用虚拟机时,常常需要与宿主计算机(以下简称为主机)操作系统交换文件,为此需要在虚拟机与主机之间建立共享文件夹. 二. 安装VMTools 要使用共享文件机制,必须首先安装VMTools. ...