echarts(三)折线柱状图

来源：互联网发布：lca类似算法编辑：程序博客网时间：2024/06/05 01:18

折线柱状图的使用以官网中的例子为例，学习下基本属性。感觉echarts3文档写的真是特别清楚，直接拿来就能用，太简单了。

文档配置官网：

http://echarts.baidu.com/option.html#title

<body><div><div id="bar" style="height:500px; width:800px">  </div></div></body><!-- 需要引用的JS --><script type="text/javascript" src="static/js/jquery.min.js"></script><script type="text/javascript" src="static/echarts/echarts.min.js"></script><script type="text/javascript">$(function(){showBar();});function showBar(){title = '多 Y 轴示例';var colors = ['#5793f3', '#d14a61', '#675bba'];option = {color: colors,tooltip: {//提示框鼠标放轴上的时候显示，默认不显示配置以下属性可显示trigger: 'axis',//x轴触发axisPointer: {//坐标轴指示器配置项type: 'cross'}},grid: {right: '20%'},toolbox: {feature: {dataView: {show: true, readOnly: false},restore: {show: true},saveAsImage: {show: true}}},legend: {data:['蒸发量','降水量','平均温度']},xAxis: [{type: 'category',//value数值轴'category' 类目轴'time' 时间轴'log' 对数轴axisTick: {//坐标轴刻度相关设置。alignWithLabel: true},data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}],yAxis: [//多个y轴{type: 'value',name: '蒸发量',min: 0,//最小刻度max: 250,//最大刻度position: 'right',axisLine: {lineStyle: {color: colors[0]}},axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '降水量',min: 0,max: 250,position: 'right',offset: 100,//偏移量axisLine: {lineStyle: {color: colors[1]}},axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',min: 0,max: 25,position: 'left',axisLine: {lineStyle: {color: colors[2]}},axisLabel: {formatter: '{value} °C'}}],series: [//顺序和yAxis对应{name:'蒸发量',type:'bar',data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name:'降水量',type:'bar',yAxisIndex: 1,//使用的 y 轴的 index，默认为0data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name:'平均温度',type:'line',yAxisIndex: 2,data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]};var chart = echarts.init(document.getElementById('bar'));chart.setOption(option);}</script>

官网例子显示：

我们项目中使用代码：

function initBorthAndDeath(){var option = {    tooltip: {        trigger: 'axis',        axisPointer: {            type: 'cross',            crossStyle: {                color: '#999'            }        }    },    legend: {    left:'right',    top:'middle',    orient:'vertical',        data:['出生人数','死亡人数'],        textStyle: {         color: '#ccc'         }    },    xAxis: [        {            type: 'category',            data: [],            axisPointer: {                type: 'shadow'            },            axisLabel: {        show: true,        textStyle: {        color: '#666'        }        },        axisTick: {        show: false        },         splitLine : {show: false}        }    ],    yAxis: [        {            type: 'value',            name: '人数',             nameTextStyle:{        color: '#666'                },            min: 0,            axisLabel: {                formatter: '{value}',                textStyle: {        color: '#ccc'        }            },axisTick: {        show: false        },         splitLine : {show: false}        },        {            type: 'value',            name: '增长率',            nameTextStyle:{        color: '#666'                },            axisLabel: {                formatter: '{value}%',                textStyle: {        color: '#ccc'        }            },            axisTick: {        show: false        },         splitLine : {show: false}        }    ],    grid: [        {            top: '15%',    left: '8%',    right: '20%',    bottom: '18%'        }        ],    series: [        {            name:'出生人数',            type:'bar',            barWidth:'15%',            itemStyle: {                normal: {                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                        offset: 0,                        color: 'rgb(98,238,21)'                    }, {                        offset: 1,                        color: 'rgb(16,168,12)'                     }])                }            },            data:[]        },        {            name:'死亡人数',            type:'bar',            barWidth:'15%',            itemStyle: {                normal: {                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{                        offset: 0,                        color: 'rgb(11,233,247)'                    }, {                        offset: 1,                        color: 'rgb(4,88,226)'                    }])                }            },            data:[]        },        {            name:'出生增长率',            type:'line',            yAxisIndex: 1,            itemStyle: {            normal:{            color:'#66fb1c'            }            },            data:[]        },        {            name:'死亡增长率',            type:'line',            yAxisIndex: 1,            itemStyle: {            normal:{            color:'#0477e3'            }            },            data:[]        }    ]};var chart = echarts.init(document.getElementById('cssw'));var date = new Date();var year = date.getFullYear();//人口总数以及人口增长率$.ajax({async:true,url:DEFAULT_CONTEXT_PATH+"/console/chart/borthChart",data:{regionCode:regionCode,endTime:year-1,startTime:year-5},dataType:"json",type:"POST",success:function(data){option.xAxis[0].data = data.rowList;var index = 5;var borth = [];var addBorth = [];$.each(data.data,function(i,item){if(i<=5){if(i>0){borth.push(item.total);addBorth.push(item.add);}}else{return;}})option.series[0].data = borth;option.series[2].data = addBorth;//死亡人口以及死亡人口增长率$.ajax({async:true,url:DEFAULT_CONTEXT_PATH+"/console/chart/deathChart",data:{regionCode:regionCode,endTime:year-1,startTime:year-5},dataType:"json",type:"POST",success:function(data){option.xAxis[0].data = data.rowList;var index = 5;var death = [];var add = [];$.each(data.data,function(i,item){if(i<=5){if(i>0){death.push(item.total);add.push(item.add);}}else{return;}})option.series[1].data = death;option.series[3].data = add;chart.setOption(option);}});}});}

效果展示：

阅读全文

0 0