echarts 实现柱状图渐变色
时间:2019-03-19
本文章向大家介绍echarts 实现柱状图渐变色,主要包括echarts 实现柱状图渐变色使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2019</title> </style> </head> <body> <div id="main" style="width: 100%;height: 600px;"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'value', splitLine:{ show:false }, axisTick: { show: false, }, axisLine:{ show: false, lineStyle:{ color:'transparent', } }, boundaryGap: [0, 0.01], }, yAxis: { type: 'category', splitLine:{ show:false }, axisTick: { show: false, }, axisLabel:{ margin:5, fontWeight: 'bold', fontSize: 15, interval: 0,// 横轴信息全部显示 rotate: 0 // 0度角倾斜显示 }, axisLine:{ show: false, lineStyle:{ color:'#FFFFFF', } }, data:['隔壁泰山','夜空中最亮的星夜空中最亮的星','串烧','说学逗唱','猴子说','创意走秀','兔耳朵舞','咖喱咖喱+我爱你'] }, series: [{ name: '评论量(QTY)', type: 'bar', data: [55,77,88,99,11,22,33,44], barWidth:30, itemStyle: { normal: { barBorderRadius: [0, 5, 5, 0], color: function (params){ var colorList = [ ['#14c3a2','#14c3a2','#22e8c3','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'], ['#0679e3','#3d97ed','#90c1fc','#22e8c3'], ['#07b8d9','#62c4db','#86e9fc','#22e8c3'] ]; var index = params.dataIndex; if(params.dataIndex >= colorList.length) { index = params.dataIndex - colorList.length; } return new echarts.graphic.LinearGradient(0,0,0,1, [ {offset: 0, color: colorList[index][0]}, {offset: 0.3, color: colorList[index][1]}, {offset: 0.6, color: colorList[index][2]}, {offset: 1, color: colorList[index][3]} ]); }, label: { show: true, position: 'insideLeft', distance: 20, textStyle: { color: '#ffffff', fontSize: '16' } } }, }, }] }; console.log(option.yAxis.data); // 使用刚指定的配置项和数据显示图表。 if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
- Phoenix边讲架构边调优
- 基于Spark Mllib的文本分类
- Sparkml库标签和索引之间转化
- 如何将RDD或者MLLib矩阵zhuanzhi
- SparkMLlib的数据类型讲解
- java lambda表达式
- kylin集群Nginx负载均衡
- Java 8 Stream 教程 (一)
- Python文档精要研读系列(1):map函数
- SparkML模型选择(超参数调整)与调优
- visual studio 2012 的制作ActiveX、打包和发布
- 用java提交一个Spark应用程序
- 一步步教你利用Github开源项目实现网络爬虫:以抓取证券日报新闻为例
- 用linqPad帮助你快速学习LINQ
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 融入ThingJS 3D可视化方案,让城市管线更加智能、高效
- 类加载机制浅记
- 聊聊dubbo-go的nacosRegistry
- Java离Linux内核有多远?
- 关于懒汉模式和恶汉模式的区别
- Chrome 新功能 — CSS Overview 尝鲜
- 0门槛,轻松实现条形竞赛图动画
- 读懂数据库中的乐观锁和悲观锁和MVCC
- CentOS 7.x安装微服务网关Apache APISIX
- Sentinel规则Pull模式持久化
- 如何用Cloudbase Framework部署一个Vue项目?
- 第17问:如何评估 alter table 的进度?
- 【LeeCode 困难 python3】329. 矩阵中的最长递增路径
- 干!一张图整理了 Python 所有内置异常
- 面试官问:孤儿进程和僵尸进程,你造吗~