echarts双向条形图案例
双向条形图图表效果如下:
具体代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>双向条形图案例 </title>
- <!-- 引入 ECharts 文件 -->
- <script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"> </script>
- </head>
- <body>
- <!-- 为 ECharts 准备一个具备大小(宽高)的 容器 -->
- <div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"> </div>
- </body>
- </html>
- <script type="text/javascript">
- // 基于准备好的容器(这里的容器是id为chart1的div),初始化echarts实例
- var chart1 = echarts.init( document.getElementById( "chart1"));
- var years = [ 2017, 2018];
- var myData = [ '本区', '本市', '省内', '省外'];
- var dataMan = {
- 2017: [ 4500, 5000, 4800, 5500],
- 2018: [ 5000, 5800, 5500, 6000],
- };
- var dataWomen = {
- 2017: [ 3500, 4200, 4000, 5200],
- 2018: [ 4000, 5000, 4500, 5800],
- };
- /* option 开始 */
- option = {
- /* baseOption 开始 */
- baseOption: { // baseOption 是一个 『原子option』,options 数组中的每一项也是一个 『原子option』。每个『原子option』中就是ECharts文档中描述的各种配置项。
- // timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。
- // timeline 和其他组件有些不同,它需要操作『多个option』。 假设,我们把 ECharts 的传统的 option 称为原子option,
- // 那么使用 timeline 时,传入 ECharts 的 option 就成为了一个集合多个原子option的复合option。
- timeline: {
- show: true, // 是否显示 timeline 组件。如果设置为false,不会显示,但是功能还存在。[ default: true ]
- type: 'slider', // 这个属性目前只支持为 slider,不需要更改。[ default: 'slider' ]
- axisType: 'category', // 轴的类型。[ default: 'time' ], 可选值为:'value' 数值轴,适用于连续数据。'category' 类目轴,适用于离散的类目数据。'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
- currentIndex: 0, // 表示当前选中项是哪项, [ default: 0 ]。比如,currentIndex 为 0 时,表示当前选中项为 timeline.data[0](即使用 options[0])。
- autoPlay: true, // 表示是否自动播放。[ default: false ]
- rewind: false, // 表示是否反向播放。[ default: false ]
- loop: true, // 表示是否循环播放。[ default: true ]
- playInterval: 2000, // 表示播放的速度(跳动的间隔),单位毫秒(ms)。[ default: 2000 ]
- realtime: true, // 拖动圆点的时候,是否实时更新视图。[ default: true ]
- controlPosition: 'left', // 表示『播放』按钮的位置。可选值:'left'、'right'。[ default: 'left' ]
- zlevel: 0, // 所有图形的 zlevel 值。[ default: 0 ]
- z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。
- //left: 'auto', // timeline组件离容器左侧的距离。[ default: 'auto' ], left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
- //top: 'auto', // timeline组件离容器上侧的距离。[ default: 'auto' ], top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。
- //right: 'auto', // timeline组件离容器右侧的距离。
- //bottom: 'auto', // timeline组件离容器下侧的距离。
- padding: 5, // timeline内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。如:[100,20,20,20]
- orient: 'horizontal', // 时间线 摆放方式,可选值有:'vertical':竖直放置。'horizontal':水平放置。
- inverse: false, // 是否反向放置 timeline,反向则首位颠倒过来。[ default: false ]
- symbol: 'emptyCircle', // timeline标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: 10, // timeline标记的大小
- lineStyle: { // 轴线
- show: true, // 是否显示轴线。可以设置为 false 不显示轴线,则可以做出不同的样式效果。[ default: true ]
- color: '#fff', // timeline 线的颜色。[ default: '#304654' ]
- width: 2, // timeline 线宽。[ default: 2 ]
- type: 'solid', // timeline 线的类型。'solid','dashed','dotted'
- opacity: 1 // 图形透明度
- },
- label: { // 轴的文本标签
- normal: {
- show: true, // 是否显示 label。[ default: true ]
- position: 'bottom', // 'auto': 完全自动决定。'left': 贴左边界放置。 当 timline.orient 为 'vertical' 时有效。'right':当 timline.orient 为 'vertical' 时有效。 贴右边界放置。
- // 'top': 贴上边界放置。 当 timline.orient 为 'horizontal' 时有效。'bottom': 贴下边界放置。 当 timline.orient 为 'horizontal' 时有效。
- // number: 指定某个数值时,表示 label 和轴的距离。为 0 时则和坐标轴重合,可以为正负值,决定 label 在坐标轴的哪一边。
- color: '#fff', // timeline.lable文字的颜色。[ default: '#304654' ]
- fontSize: 12, // timeline.lable文字的字体大小
- interval: 'auto', // label 的间隔。当指定为数值时,例如指定为 2,则每隔两个显示一个 label。[ default: 'auto' ]
- rotate: 0, // label 的旋转角度。正值表示逆时针旋转。[ default: 0 ]
- backgroundColor: 'transparent', // 文字块背景色。[ default: 'transparent' ]默认透明
- formatter: '{value}年份', // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。[ default: null ]
- },
- },
- checkpointStyle: { // 『当前项』(checkpoint)的图形样式。
- symbol: 'circle', // timeline.checkpointStyle 标记的图形。
- symbolSize: 13, // timeline.checkpointStyle 标记的大小
- color: '#FFF68F', // timeline组件中『当前项』(checkpoint)的颜色。[ default: '#c23531' ]
- borderWidth: 2, // timeline组件中『当前项』(checkpoint)的边框宽度。
- borderColor: '#FFF68F', // timeline组件中『当前项』(checkpoint)的边框颜色。[ default: 'rgba(194,53,49, 0.5)' ]
- animation: true, // timeline组件中『当前项』(checkpoint)在 timeline 播放切换中的移动,是否有动画。[ default: true ]
- animationDuration: 500, // timeline组件中『当前项』(checkpoint)的动画时长。[ default: 300 ]
- animationEasing: 'backln' // timeline组件中『当前项』(checkpoint)的动画的缓动效果。不同的缓动效果可以参考 缓动示例。
- },
- controlStyle: { // 『控制按钮』的样式。『控制按钮』包括:『播放按钮』、『前进按钮』、『后退按钮』。
- show: true, // 是否显示『控制按钮』。设置为 false 则全不显示。[ default: true ]
- showPlayBtn: true, // 是否显示『播放按钮』。[ default: true ]
- showNextBtn: true, // 是否显示『前进按钮』。[ default: true ]
- showPrevBtn: true, // 是否显示『后退按钮』。[ default: true ]
- color: '#fff', // 按钮颜色。[ default: '#304654' ]
- borderColor: '#fff', // 按钮边框颜色。[ default: '#304654' ]
- borderWidth: 1, // 按钮边框线宽。
- itemSize: 15, // 『控制按钮』的尺寸,单位为像素(px)。[ default: 22 ]
- itemGap: 12, // 『控制按钮』的间隔,单位为像素(px)。[ default: 12 ]
- position: 'left' // 『控制按钮』的位置。[ default: 'left' ], 当 timeline.orient 为 'horizontal'时,'left'、'right'有效。当 timeline.orient 为 'horizontal'时,'left'、'right'有效。
- },
- /*emphasis: { // 高亮样式 (包括 label,itemStyle,checkpoint,controlStyle)
- label: {
- },
- itemStyle: {
- },
- checkpoint: {
- },
- controlStyle: {
- }
- },*/
- // timeline 数据。Array 的每一项,可以是直接的数值。 如果需要对每个数据项单独进行样式定义,则数据项写成 Object。Object中,value属性为数值。
- data: [], // timeline.data 中的每一项,对应于 options 数组中的每个 option。
- },
- backgroundColor: '#000', // 背景色
- title: {
- text: '男女平均月收入对比', // 标题文本
- top: '3%',
- left: '2%', // 标题距左侧距离
- textStyle: { // 标题文本样式
- color: '#fff',
- fontSize: 18
- },
- },
- legend: { // 图例
- top: '5%', // 图例距离顶部距离
- left: 'center', // 图例距离左侧距离(此处水平居中)
- textStyle: { // 图例文本样式
- color: '#fff',
- },
- data: [ '男士', '女士'] // 图例的数据数组,一般对应系列名称,即 series.name
- },
- tooltip: { // 提示框
- show: true,
- trigger: 'axis',
- axisPointer: { // 坐标轴指示器配置项。
- type: 'shadow', // 'line' 直线指示器;'shadow' 阴影指示器.
- },
- formatter: '{b}<br/>{a}: {c}元' // 提示框所提示的文本内容
- },
- // 网格grid区域
- grid: [{
- show: false, // 男士grid区域
- left: '4%',
- top: '15%',
- bottom: '20%',
- containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
- width: '42%', // grid 组件的宽度。默认自适应。
- }, {
- show: false, // 中间区域(本区,本市,省内,省外)
- left: '51.7%',
- top: '20%',
- bottom: '20%',
- //width: '10%',
- tooltip: {
- show: false // 中间部分的提示框不显示也没必要显示
- }
- }, {
- show: false, // 女士grid区域
- right: '4%',
- top: '15%',
- bottom: '20%',
- containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
- width: '42%', // grid 组件的宽度。默认自适应。
- }, ],
- // X轴线配置
- xAxis: [{ // 左侧区域
- gridIndex: 0, // x 轴所在的 grid 的索引,默认位于第一个 grid。[ default: 0 ]
- type: 'value', // 轴线类型: 数值轴
- position: 'top', // 轴线位置(此处位于顶部)
- inverse: true, // 是否是反向坐标轴.[ default: false ]
- axisLine: {
- show: false, // 轴线不显示
- },
- axisTick: {
- show: false, // 轴线刻度不显示
- },
- axisLabel: { // 轴线刻度标签
- show: true, // 显示刻度标签
- textStyle: { // 标签样式
- color: '#fff',
- fontSize: 12
- },
- },
- splitLine: { // 垂直于X轴的分隔线
- show: true, // 显示分隔线
- lineStyle: { // 分隔线样式
- color: '#fff',
- width: 1,
- type: 'solid',
- },
- },
- // 强制设置坐标轴分割间隔
- interval: 2000,
- min: 0, // 最小值
- max: 8000 // 最大值
- },
- { // 中间区域
- gridIndex: 1,
- show: false, // 中间部分不显示X轴
- },
- { // 右侧区域
- gridIndex: 2,
- type: 'value',
- position: 'top',
- inverse: false, // 是否是反向坐标轴.[ default: false ]
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#fff',
- fontSize: 12
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#fff',
- width: 1,
- type: 'solid',
- },
- },
- // 强制设置坐标轴分割间隔
- interval: 2000,
- min: 0, // 最小值
- max: 8000 // 最大值
- }, ],
- // Y轴线配置
- yAxis: [{ // 左侧区域
- gridIndex: 0, // y 轴所在的 grid 的索引,默认位于第一个 grid。[ default: 0 ]
- type: 'category', // 轴线类型: 类目轴
- // 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
- boundaryGap: true, // 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
- inverse: true, // 是否是反向坐标轴.[ default: false ]
- position: 'right', // y轴的位置。'left' or 'right'
- axisLine: {
- show: false // y轴线不显示
- },
- axisTick: {
- show: true, // y轴线刻度不显示
- lineStyle: { // 刻度线样式
- color: '#fff'
- }
- },
- axisLabel: {
- show: false, // 刻度标签不显示
- },
- data: myData // Y轴(这里是类目轴)的类目数据
- },
- {
- gridIndex: 1, // 中间区域
- type: 'category',
- boundaryGap: true,
- inverse: true,
- position: 'left', // y轴的位置。'left' or 'right'
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: true, // 显示中间部分的Y轴刻度标签
- textStyle: { // 标签样式
- color: '#fff',
- fontSize: 12,
- },
- },
- data: myData
- },
- { // 右侧区域
- gridIndex: 2,
- type: 'category',
- boundaryGap: true,
- inverse: true,
- position: 'left',
- axisLine: {
- show: false
- },
- axisTick: {
- show: true,
- lineStyle: { // 刻度线样式
- color: '#fff'
- }
- },
- axisLabel: {
- show: false,
- },
- data: myData
- }],
- series: []
- },
- /* baseOption 结束 */
- options: []
- };
- /* option 结束 */
- /* 逐个为配置项中的 data 和 series 赋值 */
- for ( var i = 0; i < years.length; i++) {
- // 给时间线的 data 赋值
- option.baseOption.timeline.data.push(years[i]);
- // 根据年份的不同 给左侧,中间,右侧(男士,中间部分,女士)的三个不同系列配置系列列表 series[{},{},{}]
- // 此处中间部分的系列不必设置
- option.options.push({
- series: [
- {
- name: '男士', // 系列名称
- type: 'bar',
- barGap: 5, // 柱间距离
- barWidth: 10, // 男士柱子宽度
- xAxisIndex: 0, // 对应在X轴的grid索引
- yAxisIndex: 0, // 对应在Y轴的grid索引
- label: {
- normal: {
- show: true,
- position: 'left',
- textStyle: { // 柱子上数字样式
- color: '#fff',
- fontSize: 10,
- },
- },
- emphasis: {
- show: true,
- position: 'left',
- textStyle: { // 柱子上数字样式
- color: '#fff',
- fontSize: 10,
- },
- },
- },
- itemStyle: { // 柱条样式。
- normal: {
- color: '#3300ff', // 普通状态下柱条颜色
- },
- emphasis: {
- color: '#00ffff', // 普通状态下柱条颜色
- },
- },
- data: dataMan[years[i]], // 系列中的数据内容数组
- },
- {
- name: '女士', // 系列名称
- type: 'bar',
- barGap: 5, // 柱间距离
- barWidth: 10, // 女士柱子宽度
- xAxisIndex: 2, // 对应在X轴的grid索引
- yAxisIndex: 2, // 对应在Y轴的grid索引
- label: {
- normal: {
- show: true,
- position: 'right',
- textStyle: { // 柱子上数字样式
- color: '#fff',
- fontSize: 10,
- },
- },
- emphasis: {
- show: true,
- position: 'right',
- textStyle: { // 柱子上数字样式
- color: '#fff',
- fontSize: 10,
- },
- },
- },
- itemStyle: { // 柱条样式。
- normal: {
- color: '#FF0000', // 普通状态下柱条颜色
- },
- emphasis: {
- color: '#fe89ff', // 高亮状态下柱条颜色
- },
- },
- data: dataWomen[years[i]], // 系列中的数据内容数组
- }
- ]
- });
- }
- // 使用刚指定的配置项和数据显示图表
- chart1.setOption(option)
- </script>
想要使用该图表,只需要 复制以上代码 ,再下载 echarts.js 在页面文件中引入即可.
echarts.js 下载链接: http://echarts.baidu.com/download.html
echarts双向条形图案例相关推荐
- hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
- python图像数据是几维数据_python实现读取类别频数数据画水平条形图案例
1.数据分组– 频数分布表 环境配置:import pandas as pd import numpy as np import matplotlib.pyplot as plt 按照你设定合适的间隔 ...
- Excel学习笔记-图表(双向条形图、甘特图、饼图、往PPT中插入图表)
目录: 一.制作双向条形图 1.设置主次坐标轴 2.设置条形图方向 3.设置图表背景 二.制作甘特图 1.制作普通甘特图 2.制作动态甘特图 三.饼图美化 1.饼图美化常见设置 2.制作双层饼图 四. ...
- 【Python】数据分析.matplotlib.条形图案例处理
文章目录 数据分析-matplotlib.柱状\条形图案例处理 一.纵向条形图 二.横向条形图 三.柱状图 数据分析-matplotlib.柱状\条形图案例处理 案例一: 假设你获取到了2017年内地 ...
- Echarts正负条形图将x轴都设置成正数
最近在做项目的时候需要用到 Echarts 的正负条形图,但是条形图的左半部分的数值是负数的,但是我们需要他也是正数的,话不多说,先上效果图: 所以需要做如下几步修改: 首先需要修改x轴上面显示为负数 ...
- 【ECharts系列|04可视化大屏】ECharts可视化经典案例总结
收集整理一些ECharts实现可视化大屏效果的一些经典案例,方便在工作的时候及时的响应客户,及修改展示,根据业务需求在此基础修改即可. 第一篇为Echarts入门文档,如果没有Echarts基础,理解 ...
- Echarts折线图案例
问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合. 解决: 在实例化echarts后 clear 上一次的图. myEcharts.clear() 案例 impor ...
- echarts官方地图案例数据整理
官方案例 https://echarts.baidu.com/examples/editor.html?c=map-polygon&theme=light geoCoordMap数据 {'澳门 ...
- echarts的入门案例
开发环境 webstorm 开发基本步骤 第一步:引入echarts.js文件(echarts.js) 第二步:准备一个盒子 第三不:初始化echarts的实例化对象 第四步:准备配置项 第五步:将配 ...
最新文章
- 添加service到SystemService硬件服务
- IOS UIViewController的生命周期
- 中石油训练赛 - 数学问题(思维)
- 推荐一个好玩的鼠标和键盘使用情况统计软件,完全免费
- 动态代理之Cglib浅析
- .Net Core应用搭建的分布式邮件系统设计
- python数据结构与算法之问题求解
- 贪心算法(Greedy Algorithm)
- xshell修改编辑文件并保存
- Python 2.x vs Python 3.x(四)—— TypeError: unhashable type
- 计算机基础(五):堆和栈区别
- Windows Mysql报错:Access denied for user ‘root‘ @ localhost useing password no 或者 yes 解决
- 开源OA办公平台功能介绍:应用市场之固定资产管理(一)功能设计
- 第6课时 语音识别
- Scratch之自动走迷宫
- web开发中实现页面记忆的几种方式
- 为什么要学习凸优化?
- 步进电机 高速光耦_光耦的参数以及高速光耦如何选型!-先进光半导体
- JVM学习笔记 之 JVM概述
- Python3,2行代码添加水印,发朋友圈,图片再也不怕被盗了!!!