柱状图折线图混合使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>柱状图折线图混合使用</title><!-- 引入 echarts.js --><script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据myChart.setOption({title: {left: 'left',text: '概率',show: false},tooltip: {trigger: 'axis',formatter: '{a}:{c}',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {show: false,top: '30',bottom: '60',right: '60',left: '60'},legend: {show: true,selectedMode: 'single', //设置显示单一图例的图形，点击可切换bottom: 10,left: 50,textStyle: {color: '#666',fontSize: 12},itemGap: 20,data: ['设备一', '设备二', '设备三'],inactiveColor: '#ccc'},xAxis: [{type: 'category',data: ['济南', '青岛', '烟台', '威海', '潍坊', '东营', '日照','滨州', '莱芜', '淄博', '德州', '聊城', '临沂', '泰安', '菏泽', '济宁', '枣庄'],axisPointer: {type: 'shadow'},axisTick: {show: true,interval: 0},}],//设置两个y轴，左边显示数量，右边显示概率yAxis: [{type: 'value',name: '数量',show: true,interval: 50,},{type: 'value',name: '概率',min: 0,max: 100,interval: 10,axisLabel: {formatter: '{value} %'}}],//每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换series: [{name: '设备一',type: 'bar',data: [900, 800, 700, 680, 650, 640, 600, 570, 680, 650, 640, 600, 570,450, 400, 380, 300],barWidth: '50%',},{name: '设备一',type: 'line',yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],symbolSize: 10,itemStyle: {normal: {color: "#DDA0DD"}}},{name: '设备二',type: 'bar',data: [700, 680, 650, 640, 600, 570, 680, 650, 640, 600, 570,450, 400, 380, 300, 900, 800],barWidth: '50%',},{name: '设备二',type: 'line',yAxisIndex: 1,data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],symbolSize: 10,itemStyle: {normal: {color: "#87CEFA"}}},{name: '设备三',type: 'bar',data: [600, 570, 680, 650, 640, 600, 570,450, 400, 380, 300, 900, 800, 700, 680, 650, 640,],barWidth: '50%',},{name: '设备三',type: 'line',yAxisIndex: 1,data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],symbolSize: 10,itemStyle: {normal: {color: "#CD5C5C"}}}]});</script></body>
</html>

参考：https://blog.csdn.net/qq_34485930/article/details/79791515

柱状图折线图混合使用相关推荐

php制作曲线柱形图的框架,用GD图库生成横竖柱状图折线图的类_php
最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧 Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色 ...
Origin: 双Y轴 | 柱状图 | 折线图 | 垂线散点图的结合绘制
origin | 双Y轴 | 添加图层 | 柱状图 | 折线图 | 散点图一.前言二.数据准备三.绘图 3.1 图层1-绘制柱状图 3.2 图层2-折线图的绘制 3.2.1 添加新图层-折线图 ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
seaborn分类数据可视：散点图|箱型图|小提琴图|lv图|柱状图|折线图
一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

柱状图折线图混合使用

柱状图折线图混合使用相关推荐

最新文章

热门文章