/** * ******************************************** * ***********涨跌幅排名 ajax 交互********* * ******************************************** */ // echarts 图表初始化开始，无关后台数据交互 // var rank1 = echarts.init(document.getElementById('rank1')); // var rank2 = echarts.init(document.getElementById('rank2')); var option = { tooltip: { trigger: 'axis', textStyle: { align: 'left', color: '#5cc1ff', // color: '#fff', fontSize: '16' }, backgroundColor: 'rgba(15, 52, 135, 0.5)', borderWidth: '1', borderColor: '#5cc1ff', extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);', formatter: function(params) { return "" + params[0].name + "" + "
" + "苹果批发价格涨跌幅: " + "" + params[0].value + "%"; } }, label: { normal: { textStyle: { color: "#ff3b00" } }, emphasis: { textStyle: { color: "#ff3b00" } } }, grid: { left: '1%', right: '7%', bottom: '1%', top: '30', containLabel: true }, yAxis: { type: 'category', axisLine: { lineStyle: { color: '#8ac7ff' } }, axisTick: { show: false, interval: 0, alignWithLabel: true }, axisLabel: { interval: 0, rotate: '0', textStyle: { fontSize: 10, color: '#cee8ff' } }, data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"], splitLine: { show: false } }, xAxis: { type: 'value', name: '', splitLine: { show: true, lineStyle: { color: ['rgba(138, 199, 255, .2)'] } }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { lineStyle: { color: '#01c2db' } } }, series: [{ name: '数量', type: 'bar', stack: '总量', barWidth: 20, label: { normal: { show: true, position: 'right', formatter: "{c}%" } }, itemStyle: { normal: { barBorderWidth: '0', barBorderRadius: [10, 10, 10, 10], barBorderColor: '#f97b00', color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(255, 82, 22, 0.4)' }, { offset: 1, color: 'rgb(255, 152, 52)' }]) }, emphasis: { barBorderColor: '#644424', barBorderWidth: '1' // color: 'rgba(26,177,98,.8)' } }, // 顺序从下向上传入 data: [370, 1250, 1600, 2335, 1278, 550, 700, 1820, 450, 790] }] }; var option = { tooltip: { trigger: 'axis', textStyle: { align: 'left', color: '#5cc1ff', // color: '#fff', fontSize: '16' }, backgroundColor: 'rgba(15, 52, 135, 0.5)', borderWidth: '1', borderColor: '#5cc1ff', extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);', formatter: function(params) { return params[0].name + "
" + "苹果批发价格涨跌幅: " + "" + params[0].value + "%"; } }, label: { normal: { textStyle: { color: "rgb(0,255,132)" } }, emphasis: { textStyle: { color: "rgb(0,255,132)" } } }, grid: { left: '1%', right: '7%', bottom: '1%', top: '30', containLabel: true }, yAxis: { type: 'category', axisLine: { lineStyle: { color: '#8ac7ff' } }, axisTick: { show: false, interval: 0, alignWithLabel: true }, axisLabel: { interval: 0, rotate: '0', textStyle: { fontSize: 10, color: '#cee8ff' } }, data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"], splitLine: { show: false } }, xAxis: { type: 'value', name: '', splitLine: { show: true, lineStyle: { color: ['rgba(138, 199, 255, .2)'] } }, axisTick: { show: false }, axisLabel: { show: false }, axisLine: { lineStyle: { color: '#01c2db' } } }, series: [{ name: '数量', type: 'bar', stack: '总量', barWidth: 20, label: { normal: { show: true, position: 'right', formatter: "{c}%" } }, itemStyle: { normal: { barBorderWidth: '0', barBorderRadius: [10, 10, 10, 10], barBorderColor: 'rgb(0,255,132)', color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(0,255,132, .4)' }, { offset: 1, color: 'rgb(0,255,132)' }]) }, emphasis: { barBorderWidth: '1', barBorderColor: 'rgb(0,255,132)' // color: 'rgba(26,177,98,.8)' } }, // 顺序从下向上传入 data: [370, 1250, 1600, 2335, 1278, 550, 700, 1820, 450, 790] }] }; // rank1.setOption(rankOption1); // rank2.setOption(rankOption2); // // echarts 图表初始化完成，无关后台数据交互 // function rankInit(upData, DownData) { // rank1.setOption({ // yAxis: { // data: ['宁夏', '四川', "内蒙古", '新疆', "江苏", "山西", "陜西", "河南", "河北", "山东"], // }, // series: [{ // // 顺序从下向上传入 // data: upData // }] // }); // rank2.setOption({ // yAxis: { // data: ['西藏', '黑龙江', "河北", '陜西', "山东", "武汉", "天津", "内蒙", "河南", "云南"], // }, // series: [{ // // 顺序从下向上传入 // data: DownData // }] // }); // } // // 页面初始化 // rankInit(fakeData(10, 100), fakeData(10, 100));

Echarts在线免费图表