300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向

echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向

时间:2021-09-01 23:49:04

相关推荐

echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向

echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向

option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF'],tooltip: {trigger: 'axis'},legend: {data: ['雨量', '水位', '保证水位', '警戒水位', '累计雨量'],selected: {累计雨量: false // 图例为‘累计雨量’的一项默认置灰},textStyle: {fontSize: 16,color: '#0b4ea5'},x: 'center'},axisPointer: {link: { xAxisIndex: 'all' }},grid: [{left: 50,right: 50,height: '22%'},{left: 50,right: 50,top: '54%',height: '40%'}],xAxis: [{type: 'category',boundaryGap: true,axisLabel: {show: false},position: 'top',data: [],axisLine: {onZero: true,lineStyle: {type: 'solid',color: '#8298AF', // 左边线的颜色width: '1' // 坐标线的宽度}},axisTick: {show: false // 去除轴下面的刻度}},{gridIndex: 1,type: 'category',boundaryGap: true,data: [],axisLabel: {textStyle: {fontSize: 12,color: '#0b4ea5' // 坐标值得具体的颜色}},axisLine: {onZero: true,lineStyle: {type: 'solid',color: '#8298AF', // 左边线的颜色width: '1' // 坐标线的宽度}},axisTick: {show: false // 去除轴下面的刻度}}],yAxis: [{name: '雨量:mm',nameLocation: 'start',nameTextStyle: {padding: [0, 0, 0, -10], // 四个数字分别为上右下左与原位置距离color: '#0b4ea5',fontSize: 16 // 字体大小},type: 'value',// max: 500,scale: true,minInterval: 1.5,axisLabel: {textStyle: {fontSize: 16,color: '#0b4ea5' // 坐标值得具体的颜色}},splitLine: {show: true,lineStyle: {type: 'dashed'}},inverse: true // 反转坐标轴},{gridIndex: 1,name: '水位:m',type: 'value',// inverse: true,nameTextStyle: {// 字体样式color: '#0b4ea5',fontSize: 16 // 字体大小},// scale: true, 接近值minInterval: 1.5,axisLabel: {textStyle: {fontSize: 16,color: '#0b4ea5' // 坐标值得具体的颜色}},splitLine: {show: true,lineStyle: {type: 'dashed',color: '#0b4ea5'}}}],series: [{name: '雨量',type: 'bar',symbolSize: 8,hoverAnimation: false,data: [],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(0, 109, 217, 1)'},{offset: 1,color: 'rgba(82, 187, 255, 1)'}]),// 柱形图圆角,初始化效果barBorderRadius: [0, 0, 15, 15]}},barMaxWidth: 20},{name: '水位',type: 'line',xAxisIndex: 1,yAxisIndex: 1,symbolSize: 8,hoverAnimation: false,data: [],connectNulls: true},{name: '保证水位',type: 'line',xAxisIndex: 1,yAxisIndex: 1,symbolSize: 8,hoverAnimation: false,data: []},{name: '警戒水位',type: 'line',xAxisIndex: 1,yAxisIndex: 1,symbolSize: 8,hoverAnimation: false,data: []},{name: '累计雨量',type: 'line',symbolSize: 8,hoverAnimation: false,data: []}]},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。