博客
关于我
百度图表柱子背景颜色使用渐变效果
阅读量:132 次
发布时间:2019-02-26

本文共 2882 字,大约阅读时间需要 9 分钟。

??????

?????????????ECharts???????????????????????????????????????????????

???????????????????????ECharts????????????????????????????????????????????????????????????????

????

??????????

var app = echarts.init(document.getElementById("box"));  var option = {      title: {          text: '?????',          left: '50%'      },      tooltip: {          trigger: 'axis'      },      legend: {          type: 'plain',          data: ['2011?', '2012?', '2013?'],          bottom: '0px'      },      grid: {          left: '0%',          right: '4%',          bottom: '10%',          top: '15%',          containLabel: true      },      xAxis: {          type: 'value',          data: [2000, 3900, 8000],          onZero: false      },      yAxis: {          type: 'category',          data: [],          show: false      },      series: [          {              name: '2011?',              type: 'bar',              data: [2000],              itemStyle: {                  normal: {                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [                          { offset: 0, color: '#fff' },                          { offset: 1, color: '#B0B0B0' }                      ])                  }              },              barWidth: '20px',              label: {                  normal: {                      show: true,                      position: 'insideRight',                      color: '#333'                  }              }          },          {              name: '2012?',              type: 'bar',              data: [3900],              itemStyle: {                  normal: {                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [                          { offset: 0, color: '#fff' },                          { offset: 1, color: '#EF8945' }                      ])                  }              },              barWidth: '20px',              label: {                  normal: {                      show: true,                      position: 'insideRight',                      color: '#333'                  }              }          },          {              name: '2013?',              type: 'bar',              data: [8000],              itemStyle: {                  normal: {                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [                          { offset: 0, color: '#fff' },                          { offset: 1, color: '#6EA6DA' }                      ])                  }              },              barWidth: '20px',              label: {                  normal: {                      show: true,                      position: 'insideRight',                      color: '#333'                  }              }          }      ]  };  app.setOption(option);

????????????????????????????????????????????????????????ECharts?????????????????????????????????????????????????????

转载地址:http://iovf.baihongyu.com/

你可能感兴趣的文章
Prometheus 云原生 - 微服务监控报警系统 (Promethus、Grafana、Node_Exporter)部署、简单使用
查看>>
Prometheus 云原生 - 监控 Linux、MySQL、Redis、RabbitMQ、Docker、SpringBoot 3.x
查看>>
Prometheus 介绍
查看>>
Prometheus 安全配置详解
查看>>
prometheus 安装node_exporter, node_exporter 安装最新版 普罗米修思安装监控服务器client
查看>>
Prometheus 安装部署实战
查看>>
prometheus 持久化存储方案
查看>>
Prometheus 监控系统企业级实战
查看>>
Prometheus 监控系统简介
查看>>
Prometheus 配置详解
查看>>
Prometheus 采集器使用详解
查看>>
Prometheus 黑盒监控实战
查看>>
prometheus+alertmanager+grafana监控部署教程
查看>>
Prometheus+Grafana构建智能化Kubernetes监控系统实战
查看>>
Prometheus+SpringBoot应用监控全过程详解
查看>>
Prometheus+SpringBoot应用监控全过程详解
查看>>
prometheus安装
查看>>
Prometheus实战教程:监控Kafka消息
查看>>
Prometheus实战教程:监控mysql数据库
查看>>
Prometheus实战教程:监控Nginx状态
查看>>