【前端统计图】echarts改变颜色属性的demo

一：柱状图改变颜色

5640239-d199a113617f4e2f.png
图片.png

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--   柱状统计图 --><div class="row"><div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div></div></body><script src="../../js/echarts/echarts.min.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title: {text: '平均耗时（分钟）',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {/*  data: [ '2012年']*/},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']},series: [{name: '2012年',type: 'bar',itemStyle: {normal: {color: '#a8bcd4'}},data: [10, 20, 31, 14, 11, 67]}]});</script></html>

二：横向柱状图渐变

5640239-653c822734916756.png
图片.png

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--   柱状统计图 --><div class="row"><div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div></div></body><script src="../../js/echarts/echarts.min.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title: {text: '平均耗时（分钟）',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {/*  data: [ '2012年']*/},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']},series: [{name: '2012年',type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#fff'}, {offset: 1,color: '#3fa7dc'}]),}},data: [10, 20, 31, 14, 11, 67]}]});</script></html>

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程

5640239-110eda03fdb4f88a
image

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

转载于:https://www.cnblogs.com/wangting888/p/9701858.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251123.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DOM-1 DOM初探、JS对象、XML、幻灯片案例展示

DOM-1 DOM初探、JS对象、XML、幻灯片案例展示

DOM DOM —— Document Object Model(文档对象模型)DOM 对象 → 宿主对象&#xff08;是浏览器提供的&#xff09;通过浏览器提供的方法表示或操作HTML和XML不能操作css标签&#xff1a;<></>对元素&#xff1a;<>及内部的内容,getElementsByTagName获取的是…
阅读更多...
http --- 密码、密钥、对称(公开)密钥加密系统、数字签名、数字证书的一些概念

http --- 密码、密钥、对称(公开)密钥加密系统、数字签名、数字证书的一些概念

密码(cipher) // 密码是一套编码方案和使用相应解码方式的结合体 // *明文:使用密码加密之前的称为明文 // *密文:使用密码进行加密的称为密文最初的密码是相当简单的,很容易就可以破解,于是产生了密码机: // 密码机可以用复杂得多得密码来快速、精确地对报文进行编码.它们可…
阅读更多...
elasticsearch5.x：查询建议介绍、Suggester 介绍以及Java-api实现

elasticsearch5.x：查询建议介绍、Suggester 介绍以及Java-api实现

elasticsearch5.x&#xff1a;查询建议介绍、Suggester 介绍 参考&#xff1a;http://www.cnblogs.com/leeSmall/p/9206646.html 参考(重点)&#xff1a;https://elasticsearch.cn/article/142 参考&#xff08;官网&#xff09;&#xff1a;https://www.elastic.co/guide/en/e…
阅读更多...
DOM-2 document对象、获取元素、节点、遍历树

DOM-2 document对象、获取元素、节点、遍历树

一、document获取元素 1. 方法 document.getElementById(‘box’) // 在IE8及以下是不分大小写的&#xff0c;而且name值也能匹配上document.getElementsByClassName(’’) // IE8及以下是用不了的document.getElementsByTagName() 都兼容document.getElementsByName() 用的非…
阅读更多...
javascript --- js中的事件

javascript --- js中的事件

事件实现松耦合: // JS和HTML之间的交互是通过事件实现的. // 事件,就是文档或浏览器窗口中发生一些特定的交互瞬间. // 可以使用侦听器来预定事件,以便事件发生时执行相应的代码. // 这种在传统软件工程中被称为观察员模式的模型,支持页面的行为与页面的外观之间的松耦合事件…
阅读更多...
centos系统设置局域网静态IP

centos系统设置局域网静态IP

---恢复内容开始--- centos系统设置局域网静态IP 很多时候&#xff0c;我们并不希望漏油器重启之后&#xff0c;自己的服务器动态的获取IP&#xff0c;这样很不利&#xff0c;因为你可能装了mysql&#xff0c;redis&#xff0c;等软件&#xff0c;然后需要远程去访问这台服务器…
阅读更多...
SQLServer数据库（二）

SQLServer数据库（二）

数据库设计&#xff1a;就是将数据库中的数据库实体及这些数据库实体之间的关系&#xff0c;进行规划和结构化的过程。 项目开发过程&#xff1a; 需求分析 概要设计 详细设计 代码编写 运行测试 打包发行 数据库的系统分析基本步骤&#xff1a;收集信息、标识实体、标识每个实…
阅读更多...
DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构

DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构

讲评 节点属性 nodeType 元素节点 1 大写 属性节点 2 文本节点 3 #text 注释节点 8 #comment document 9 DocumentFragment 11 nodeName是只读属性元素节点的nodeName是大写的其余的是#小写的元素节点没有nodeValue属性&#xff0c;null&#xff0c;是可写的其余有&#xff08…
阅读更多...
javascript --- DOM0级、DOM2级、跨浏览器 的事件处理程序

javascript --- DOM0级、DOM2级、跨浏览器 的事件处理程序

DOM0级事件处理程序: // 使用DOM0级方法指定的事件处理程序被认为是元素的方法 // 这个时候的事件处理程序是在元素的作用域中运行: <div id "myBtn" >DOM0</div> <script>var btn document.getElementById("myBtn");btn.onclick fun…
阅读更多...
collections deque队列及其他队列

collections deque队列及其他队列

from collections import dequedq deque(range(10),maxlen10) dq.rotate(3)#队列旋转操作接受一个参数N&#xff0c;让N>0时&#xff0c;队列的最右边N个元素会被移动到队列最左边&#xff0c;反之会移到队列最右边 dq.appendleft(-1)#头部添加dq.extend([11,22,33])#尾部添…
阅读更多...
002 模板实参推断、重载与模板

002 模板实参推断、重载与模板

模板实参推断 一、模板函数显示实参 情况1&#xff1a; template <typename T1, typename T2, typename T3> T1 sum(T2 a, T3 b) {return a b; } 分析&#xff1a;调用的时候就需要指定T1的类型&#xff0c;如&#xff1a;sum<float>(1, 2); 于是sum函数的返回类型…
阅读更多...
DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性

DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性

讲评 节点创建 Document.prototype ← document.createElement(div)document.createTextNode(xxx) // 创建文本节点document.createComment(xxx) // 创建注释节点 增加/剪切子节点 Node.prototype ← node.appendChild(node)总是在父元素的最后增加&#xff08;类似push&am…
阅读更多...
javascript --- 事件对象和事件类型

javascript --- 事件对象和事件类型

// 无论程序使用"DOM0级"规范还是"DOM2级"规范,都会在局部产生一个event对象, // 将其打印出来研究: <div id"divBtn"><button id"rawBtn" >Click Me!</button></div> <script>const divBtn document…
阅读更多...
关于APP更新，两包共存的解决方案

关于APP更新，两包共存的解决方案

大多数是由于包名不一致导致的&#xff0c;一定要注意包名一致、不然手机会认为是两个app&#xff0c;导致两个包共存 查看包名的方法 1、hbuilder打包时会有提示 2、手机打开设置->应用->正在运行->对应app即可查看 转载于:https://www.cnblogs.com/zz-0128/p/827969…
阅读更多...
DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸

DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸

查看滚动条的距离 方法版本window.pageXOffset / pageYOffsetIE9/IE8及以下不支持(常规)document.body.scrollLeft/scrollTopIE9/IE8及以下(部分支持&#xff0c;具体看模式)document.documentElement.scrollLeft/scrollTopIE9/IE8及以下(部分支持&#xff0c;具体看模式)wind…
阅读更多...
python中with及closing

python中with及closing

推荐使用 "with"语句 以管理文件:with open("hello.txt") as hello_file: for line in hello_file: print line对于不支持使用"with"语句的类似文件的对象,使用 contextlib.closing():import contextlibwith contextlib.closing(urlli…
阅读更多...
http --- Web页面请求的历程(如何根据URL寻找到需要的资源)

http --- Web页面请求的历程(如何根据URL寻找到需要的资源)

HTTP概况: // 超文本传输协议(HyperText Transfer Protocol,HTTP):是Web的应用层协议,它是Web的核心. // 客户端和服务器运行在不同的端系统中,通过交换HTTP报文进行会话 // HTTP定义了这些报文的结构以及客户和服务器进行报文交换的方式 // HTTP定义了Web客户向Web服务器请求…
阅读更多...
DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探

DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探

规范 <style type"text/css"></style><script type"text/javascript"></script>读写样式属性 .style是访问不到css样式表的&#xff0c;只能访问到行内/内联的属性&#xff0c;当未设置行内属性时&#xff0c;结果为空字符串 设…
阅读更多...
RGBD论文阅读笔记

RGBD论文阅读笔记

Single-Image Depth Perception in the Wild 简要记载一下对于利用RGB图像depth图像得到segmentation的论文。 论文名称&#xff1a;Cascaded Feature Network for Semantic Segmentation of RGB-D Images 论文出处 ICCV 2017 Lin 模型结构 数据集 NYUDv2 SUN-RGBD 性能分析 总…
阅读更多...
vue组件调用(全局调用和局部调用)

vue组件调用(全局调用和局部调用)

当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listBox: 路径 src/components/listBox.vue <template><div class"listBox">listBox222</div> </templ…
阅读更多...
最新文章

Copyright @ 2022~2023