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: []}]},

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

java用ftl模板循环导出word生成echarts图表折线图柱状图饼图横向表格竖向表格
写了一个月 4月20-5月20,终于完成 -一个日报大多es查的数据,有一点mysql查的数据先占个坑,回头有空记录一下
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
echarts中折线图、柱状图之间的转换
echarts中折线图.柱形图.数据视图的转换需要toolbox里面的内容(也就是加粗的部分) // 基于准备好的dom,初始化echarts实例 var day = echarts.init ...
echarts 折线图 + 柱状图
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...
echarts——实现面积图+柱状图+折线图等——基础积累
因为到年底了,很多项目组都开始做年终汇报,年终汇报的展示形式最常见的就是看板. 样式美观,可以放到电视机或者大屏上,通过图表的形式进行展示,简单明了,通俗易懂. 直接上最终效果图:是一个展示客户量/流 ...
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...
使用echarts（二）自定义图表折线图
自定义图表折线图样式如下代码如下 ```html Document ``` 详细参数说明: https://www.w3cschool.cn/echarts_tutorial/
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图
记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图柱状图(堆叠)+折线图获取饼状图获取环形图 jar包下载地址:https://download.csdn. ...

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

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

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

最新文章

热门文章