$(function(){ initPlanInput(); }); function initPlanInput1(){ var dom = document.getElementById("planInput1"); var myChart = echarts.init(document.getElementById('planInput1')); var colorList = { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#06DBF5' // 0% 处的颜色 }, { offset: 1, color: '#00d386' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } option = { backgroundColor: '#fff', tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '0%', containLabel: true }, xAxis: { type: 'category', data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018' ], // axisTick: { // alignWithLabel: true // } axisLine: { lineStyle: { color: 'black' } }, axisLabel: { interval: 0, rotate: 40, textStyle: { fontFamily: 'Microsoft YaHei' } }, }, yAxis: { type: 'value', axisLine: { // show: false, lineStyle: { color: 'black' } }, splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.3)' } }, axisLabel: { } }, series: [{ name: '', type: 'bar', barWidth: '40%', itemStyle: { color: function(params) { return colorList; }, //barBorderRadius: 15, }, emphasis:{ itemStyle:{ color:'#FBB419' } }, data: [100, 120, 150, 140, 170, 160, 180] }] }; if (option && typeof option === "object") { myChart.setOption(option, true); } } function initPlanInput(){ var dom = document.getElementById("planInput"); var myChart = echarts.init(document.getElementById('planInput')); var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910]; var xdata = ['2012', '2013', '2014', '2015', '2016', '2017', '2018']; var option = { grid: { left: 30, right: 50, top: 50, bottom: 30, containLabel: true }, xAxis: { type: 'category', // boundaryGap: false, data: xdata, triggerEvent: true, splitLine: { show: false }, axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255,255,255,.6)' } }, axisTick: { show: false }, axisLabel: { color: '#000', fontSize: 16, fontWeight: 'bold', /*textShadowColor: '#000', textShadowOffsetY: 2*/ } }, yAxis: { name: '单位(万元)', nameTextStyle: { color: '#000', fontSize: 16, /*textShadowColor: '#000', textShadowOffsetY: 2*/ }, type: 'value', splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.2)' } }, axisLine: { show: true, lineStyle: { width: 2, color: 'rgba(255,255,255,.6)' } }, axisTick: { show: true }, axisLabel: { color: '#000', fontSize: 16, /*textShadowColor: '#000', textShadowOffsetY: 2*/ } }, series: [{ data: data, type: 'line', symbol: 'circle', symbolSize: 12, color: '#FEC201', lineStyle: { color: "#03E0F2" }, label: { show: true, position: 'top', textStyle: { color: '#FEC201', fontSize: 18, fontWeight: 'bold' } }, areaStyle: { color: 'rgba(1,98,133,0.6)' } }, { type: 'bar', animation: false, barWidth: 3, hoverAnimation: false, data: data, tooltip: { show: false }, itemStyle: { normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#91EAF2' // 0% 处的颜色 }, { offset: 1, color: '#074863' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, label: { show: false } } } }] } if (option && typeof option === "object") { myChart.setOption(option, true); } }