双柱状图与双折线图混合

问题：双柱状图的时候，折线图不能从柱状图的中心点开始

解决方法：使用双x轴来控制折线的起始位置
代码

var option = {backgroundColor:'#4a4a4a',tooltip: {trigger: 'axis',},legend: {padding:0,itemGap:4,itemWidth:8,bottom:'2%',data:['今年','去年'],icon:'circle',textStyle:{fontSize:10,color:'#9b9b9b'}},title:{text:'全国月销量',left:'center',textStyle:{color:'#d5d5d5',fontSize:13,}},grid:{height:'62%',top:'15%',width:'80%',left:'12%'},xAxis: [{type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],axisLabel:{color:'#757575',fontSize:10,interval:0,}}, ],yAxis: {type: 'value',interval:100,axisLabel:{color:'#757575',fontSize:10}},series: [{   name:'今年',data: [120, 200, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130],type: 'bar',varWidth:'12px',itemStyle:{color:'#9c9c9c'}},{name:'去年',data: [1000, 200, 500, 800, 700, 100, 390, 300, 607, 460, 900, 130],type: 'bar',varWidth:'12px',itemStyle:{color:'#c4c4c4'}},{xAxisIndex:1, data: [120, 200, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130],type: 'line',itemStyle:{color:'#f9f9f9'},symbol:'none'},{xAxisIndex:1,  data: [1000, 200, 500, 800, 700, 100, 390, 300, 607, 460, 900, 130],type: 'line',itemStyle:{color:'#f9f9f9'},symbol:'none'},]};// 增加了一个隐藏的x轴，用来控制线图的点的位置option.xAxis[1] = {type: 'value',max: option.xAxis[0].data.length * 100,show: false}option.series[2].data = option.series[2].data.map((x, i) => [27 + i * 100, x])option.series[3].data = option.series[3].data.map((x, i) => [73 + i * 100, x])var bar = echarts.init(document.getElementById('bar'));bar.setOption(option);

效果图

如有错误请指正

双柱状图与双折线图混合相关推荐

python双柱状图与双折线图_双坐标实现图标中同时存在柱状图和折线图
工作中经常会遇到在处理数据的时候,需要将柱状图和折线图同时放到一张表中,这怎么实现的呢,下面将讲述. 工具/原料 excel表方法/步骤 1 以上表为例,将不良品重量和不良品率同时做到一张表上为目标 ...
python双柱状图与双折线图_如何绘制双轴柱状图和折线图？
如何绘制双轴柱状图和折线图? 答:第1步,先将数据作成如下表格. ××市2010--2014年农业灌溉用水有效利用系数年份灌溉亩数(万亩)毛灌溉用水总量(万米3)净灌溉用水总量(万米3)灌溉水有效利 ...
MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现
Demo补充中(UpDating):https://github.com/JinBoy23520/MPAndroidChartDemoByJin 本文出自:http://blog.csdn.net/d ...
vue项目中，Echarts柱状图和折线图混合显示
<div ref="myChart" :style="{width: '800px', height: '500px'}"></div> ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
python绘制双Y轴折线图以及单Y轴双变量柱状图
近来实验室的师姐要发论文,由于论文交稿时间临近,有一些杂活儿需要处理,作为实验室资历最浅的一批,我这个实习生也就责无旁贷地帮忙当个下手.今天师姐派了一个小活,具体要求是: 给一些训练模型的迭代次数,训 ...
Java通过JfreeChart生成转Base64图片字符串（饼图、折线图、柱状图、折线图-多条、3D柱状图、气泡图、时序图、曲线图、区域图、分布图、联合分类图、双X轴图、K线图、柱状图-横向等图)
工具类 CreatLineChart.java package DrawLine;import java.awt.BasicStroke; import java.awt.Color; import ...
R语言ggplot画双坐标-柱状图、折线图
ggplot一般不用来画双坐标,有些图双坐标结合起来看比较好,比方说条形图和柱状图. 1.画双坐标要用到函数scale_y_continuous,这个函数规定次坐标与主坐标的换算关系,用 sec_ax ...
MATLAB采用双坐标轴同时绘制柱状图和折线图
利用MATLAB同时绘制柱状图和折线图,其中柱状图表示温度,折线图表示颗粒物浓度,左侧y轴表示温度(单位摄氏度),右侧y轴表示颗粒物浓度(个/每立方米). MATLAB plotyy 方法/步骤第一 ...

双柱状图与双折线图混合

双柱状图与双折线图混合相关推荐

最新文章

热门文章