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 不同颜色(柱状图)的更多相关文章

  1. vue echart例——柱状图及高度自适应

    1.安装 npm install echarts -s 2.例——点击tab切换时柱状图重绘,高度根据返回数据设置. <template> <div> <ul id=&q ...

  2. 动态更新echart成交量柱状图,并且不重绘,类似K线的更新方式

    function setoption(data) { let dataVolume=volumeChartData; var option = { title: { text: '成交量',// su ...

  3. 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合

    数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...

  4. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  5. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  6. echart折线图,柱状图,饼图设置颜色

    转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category ...

  7. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  8. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  9. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day18 用户授权_18-微服务之间认证-需求分析

    4.1 需求分析 前边章节已经实现了用户携带身份令牌和JWT令牌访问微服务,微服务获取jwt并完成授权. 当微服务访问微服务,此时如果没有携带JWT则微服务会在授权时报错. 测试课程预览: 1.将课程 ...

  2. Mysql视图介绍

    视图是一个存在于数据库中的虚拟表.视图本身没有数据,只是通过执行相应的select语句完成获得相应的数据.可以理解为select语句的别名. (1).视图的作用 1.如果某个查询结果出现的非常频繁,即 ...

  3. keepalived两台机器同时出现vip问题

    配置文件: 主:192.168.1.14 ! Configuration File for keepalived global_defs { script_user root enable_scrip ...

  4. (九)Centos之搜索命令whereis、which和字符串搜索命令grep

    一.Centos之命令搜索命令whereis与which 1.1 whereis 命令名(搜索命令所在路径及帮助文档所在位置) 选项: -b :只查找可执行文件位置 -m:只查找帮助文件 1.2 wh ...

  5. scdbg分析shellcode

    https://isc.sans.edu/forums/diary/Another+quickie+Using+scdbg+to+analyze+shellcode/24058/ scdbg -f s ...

  6. nfs搭建;nfs监控;mount对于nfs的相应配置

    nfs搭建 https://www.cnblogs.com/lms0755/p/9211585.html https://www.jianshu.com/p/e47cccbb3ae5 https:// ...

  7. 白嫖百度 Tesla V100 笔记(在 AI Studio 上使用 tensorflow 和 pytorch 的方法)

    登陆百度 AI Studio 并按照教程创建新项目 启动项目并进入控制台 下载 Anaconda3/Miniconda3 安装脚本 安装在 ~/work/*conda3 目录 输入命令 source ...

  8. 基于MSP430G2系列实现的步进电机控制

    基于MSP430G2系列实现的步进电机控制 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 系列博客说明:此系列博客属于作者在大三大四阶段所储备的关于电子电路 ...

  9. windows服务器入门 mysql的安装

    钱的问题   只能安装mysql了 下载MySQL 5.5(其他的版本都可以的  只是在这里以mysql5.5为例)安装包(下载地址:http://dev.mysql.com/downloads/my ...

  10. selenium + python 环境配置 (四)之启动Firefox

    火狐浏览器自身适配selenium   因此不需要再安装 直接代码启动: __author__ = 'admin' #作者 # -*- coding:utf-8 -*- # 建议所有都加编码 from ...