1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < title >Echarts柱状折线混合图</ title > <!-- 引入 ECharts 文件 --> < script src="js/echarts/echarts.js"></ script > </ head > < body > < div id="main" style="width: 600px;height:400px;"></ div > < script type="text/javascript"> var option = { tooltip: { trigger: 'axis' }, legend: { data:['降水量','折线'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis: [ { type: 'value', name: '水量/ml', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ' } } ], series: [ { name:'降水量', type:'bar', /*itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#fe6262'}, {offset: 0.5, color: '#fe4141'}, {offset: 1, color: '#fe1818'} ] ), }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#fe6262'}, {offset: 0.5, color: '#fe4141'}, {offset: 1, color: '#fe1818'} ] ) } },*/ /*设置柱状图颜色*/ itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#fe4f4f','#fead33','#feca2b','#fef728','#c5ee4a', '#87ee4a','#46eda9','#47e4ed','#4bbbee','#7646d8', '#924ae2','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] }, /*信息显示方式*/ label: { show: true, position: 'top', formatter: '{b}\n{c}' } } }, data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45] }, { name:'折线', type:'line', itemStyle : { /*设置折线颜色*/ normal : { /* color:'#c4cddc'*/ } }, data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45] } ] }; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </ script > </ body > </ html > |