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. 本地git仓库推送到服务器自建的git仓库实现目录文件同步教程

    首先,先在服务器上安装git,如果有git的话就不用走这一步了 yum安装git [root@iZuf6fazwjb6lb3z82smzoZ ~]# cd src/ [root@iZuf6fazwjb ...

  2. 丢失libiconv-2.dll解决办法以及无法定位输入点libiconv-2.dll到动态链接库

    摘自https://blog.csdn.net/mengxiangjia_linxi/article/details/78147348 丢失libiconv-2.dll解决办法以及无法定位输入点lib ...

  3. js面向对象写法及栈的实现

    function Stack() { this.dataStore = []; this.top = 0; //指向栈顶的位置 this.push = push; this.pop = pop; th ...

  4. 红绿灯 promise和原始方式实现

    Promise 方式 async+await function sleep(duration){ return new Promise(function(resolve){ setTimeout(re ...

  5. 第十八章 并发登录人数控制——《跟我学Shiro》

    目录贴:跟我学Shiro目录贴 在某些项目中可能会遇到如每个账户同时只能有一个人登录或几个人同时登录,如果同时有多人登录:要么不让后者登录:要么踢出前者登录(强制退出).比如spring securi ...

  6. React16+配置打包目录

    在学习react的时候,肯定最终都要用脚手架,对比了手写配置webpack(比较费劲).generator-react-webpack(打不开官方文档……),最终还是选择了react官方的create ...

  7. 【转】git2.9.2使用总结

    git2.9.2使用总结 1.系统:Windows7 2.git版本:2.9.2 由于我的git版本是最新版,后面我出现的坑就是最新版本的问题. 3.托管环境:开源中国的码云 . 使用步骤 1.在码云 ...

  8. JS 报错(intermediate value)(...) is not a function

  9. 在同一个页面多次调用el-select选择器

    elementui是一个十分好用的组件库,但毕竟也不能做到面面俱到,有些还是要根据根据自己的实际需求做一些自定义的方法. 比如el-select选择器在同一个页面使用多次的话就会造成选择一个另一个也会 ...

  10. Oracle(11g)详细安装步骤

     最详细的Oracle安装步骤就在这里,话不多说直接给大家上安装Oracle的详细教程  如果没有安装包,可以先点击下载下载地址:http://download.oracle.com/otn/nt/o ...