之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!!

1、折线图修改颜色:

  1. xAxis: {
  2. type: 'category',
  3. boundaryGap: false,
  4. data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']
  5. },
  6. yAxis: {
  7. type: 'value'
  8. },
  9. series: [
  10. {
  11. name:'员工数',
  12. type:'line',
  13. stack: '总量',
  14. itemStyle:{
  15. normal:{
  16. lineStyle:{
  17. color:'#b5b5b6'
  18. }
  19. }
  20. },
  21. data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号!
  22. }
  23. ]

其中的series 中的lineStyle中的 color 就是折现的颜色!

2、环形图修改颜色:

  1. function queryData2(){
  2. var i=0;
  3. var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
  4. myChart2 = echarts.init(document.getElementById('main2'));
  5. option2 = {
  6. tooltip : {
  7. trigger: 'item',
  8. formatter: "{a} <br/>{b} : {c} ({d}%)"
  9. },
  10. legend: {
  11. orient : 'vertical',
  12. x : 'left',
  13. data:['女','男']
  14. },
  15. toolbox: {
  16. show : true,
  17. feature : {
  18. saveAsImage : {show: true}
  19. }
  20. },
  21. calculable : true,
  22. series : [
  23. {
  24. name:'性别结构',
  25. type:'pie',
  26. radius : ['30%', '70%'],
  27. itemStyle : {
  28. normal : {
  29. color:function(){
  30. return colors[i++];
  31. },
  32. label : {
  33. show : false
  34. },
  35. labelLine : {
  36. show : false
  37. }
  38. },
  39. emphasis : {
  40. label : {
  41. show : true,
  42. position : 'center',
  43. textStyle : {
  44. fontSize : '30',
  45. fontWeight : 'bold'
  46. }
  47. }
  48. }
  49. },
  50. data:[]
  51. }
  52. ]
  53. };
  54. }

其中 函数开始定义了一个 colors 对象这里保存的都是颜色值,而在series中的itemStyle中的normal 中定义了一个color:function(){ return colors[i++]} 函数,这个函数的作用就是随机获取颜色值。这样就修改了

3、柱状图:

  1. yAxis : [
  2. {
  3. type : 'value'
  4. }
  5. ],
  6. series : [
  7. {
  8. name:'部门人数',
  9. type:'bar',
  10. data:[],
  11. //颜色
  12. itemStyle:{
  13. normal:{
  14. color:'#f5b031',
  15. }
  16. },
  17. markPoint : {
  18. data : [
  19. {type : 'max', name: '最大值'},
  20. {type : 'min', name: '最小值'}
  21. ]
  22. },
  23. markLine : {
  24. data : [
  25. {type : 'average', name: '平均值'}
  26. ]
  27. }
  28. }
  29. ]

颜色的修改还是在series 中的itemStyle 中的normal 中的color这个值。

4、饼图颜色修改:

  1. var  option = {
  2. tooltip: {
  3. trigger: 'item',
  4. formatter: "{a} <br/>{b}: {c} ({d}%)"
  5. },
  6. //设置饼图的颜色
  7. color:['#f6da22','#bbe2e8','#6cacde'],
  8. legend: {
  9. orient: 'vertical',
  10. x: 'left',
  11. data:['柴油','汽油','附属油'],
  12. show:false
  13. },

饼图的颜色修改和折线图 环形图不同,他是单独出来的!

echart 折线图、柱状图、饼图、环形图颜色修改的更多相关文章

  1. 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)

    一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...

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

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

  3. OpenGL——折线图柱状图饼图绘制

    折线图绘制代码: #include<iostream> //旧版本 固定管线 #include<Windows.h> #include <GL/glut.h> // ...

  4. G2 基本使用 折线图 柱状图 饼图 基本配置

    G2的基本使用 1.浏览器引入  <!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv ...

  5. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

  6. android 开源图表库MPChart最简单使用方法示例教程Demo--折线图 柱状图

    转载请注明本文出处:http://blog.csdn.net/wingichoy/article/details/50428246 MPChart是android上一款强大的图表开源库,他可以轻松的绘 ...

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

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

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

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

  9. 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图

    折线图: package org.achartengine.chartdemo.demo.chart; import java.util.ArrayList; import java.util.Lis ...

随机推荐

  1. android点击桌面App图标activity启动流程

    1.点击桌面App图标,Launcher进程采用Binder IPC向system_server进程发起startActivity请求:2.system_server进程接收到请求后,向zygote进 ...

  2. Spark Shell启动时遇到<console>:14: error: not found: value spark import spark.implicits._ <console>:14: error: not found: value spark import spark.sql错误的解决办法(图文详解)

    不多说,直接上干货! 最近,开始,进一步学习spark的最新版本.由原来经常使用的spark-1.6.1,现在来使用spark-2.2.0-bin-hadoop2.6.tgz. 前期博客 Spark ...

  3. Linux下远程连接工具SSHSecureShellClient的使用

    实际开发中,Linux 服务器都在其他的地方,我们要通过远程的方式去连接 Linux 并操作它,Linux 远程的操作工具有很多,企业中常用的有 Puttty.secureCRT.SSH Secure ...

  4. TCP-Java--图谱

  5. HRBUST 1909——理工门外的树——————【离线处理,差分前缀和】

    理工门外的树 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %lld , %llu Java class n ...

  6. [转]JFreeChart简介及下载、配置

    JFreeChart简介 JFreeChart是完全基于Java语言的开源项目,因此可以使用在Java开发环境中,包括Java应用程序,或者是Java Web应用都没有任何问题.结合iText项目,可 ...

  7. 通过js操作样式(评分)

    <style> td{ font-size:50px; color:yellow; cursor:pointer; } </style> <script type=&qu ...

  8. Ling之select

    select用法: 1.Dictionary<string, string>转json Newtonsoft.Json.JsonConvert.SerializeObject(dicSub ...

  9. Hashtable(哈希表)

    简体字繁体字转化: class Program { static void Main(string[] args) { Hashtable ht = new Hashtable(); ; i < ...

  10. 1.net平台

    .net/dotnet:一般指的是.Net Framework框架,是一种平台,一种技术.   .net Framewoek框架是.net平台不可缺少的一部分,它提供了一个稳定的运行环境来保证.net ...