直接代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1571424732409"></script> </head> <body> <!--支出表--> <div style="width: 1000px;height: 500px;background-color: #222222" id="test1"> </div> </body> <script> var chart1 = echarts.init(document.getelementbyid('test1')); var option = { title: [ { top: '40%', left: 10, subtextstyle: { align: 'left', color: '#ffffff', fontsize: 12, }, subtext: '每\n月\n执\n行\n金\n额'// \n换行 }, { top: '40%', right: 10, subtextstyle: { align: 'right', color: '#ffffff', fontsize: 12, }, subtext: '累\n计\n执\n行\n金\n额' }, ], grid: { top: 100 }, backgroundcolor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorstops: [{ offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色 }], global: false // 缺省为 false }, tooltip: { trigger: 'axis', axispointer: { type: 'cross', crossstyle: { color: '#999' } } }, legend: { data: [ {name: '每月预计支出', icon: 'circle'}, {name: '每月实际支出', icon: 'circle'}, {name: '累计预计支出'}, {name: '累计实际支出'} ], textstyle: { color: '#ffffff', fontsize: 11 }, y: 'bottom', x: 'center', }, xaxis: [ { type: 'category', axisline: { linestyle: { color: '#1f7eff', width: 1 } }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axispointer: { type: 'shadow' }, axislabel: { interval: 0,//横轴信息全部显示 textstyle: { color: '#fff' }, fontsize: 11, // rotate:45,//度角倾斜显示 formatter: function (value) { return value.length > 5 ? value.substring(0, 5) + '...' : value; } } } ], yaxis: [//这里配置两条y轴 { type: 'value', splitline: { show: true, linestyle: { color: '#021439', width: 1 } }, axisline: { linestyle: { color: '#1f7eff', width: 1 } }, axislabel: { show: true, textstyle: { color: '#fff' }, fontsize: 11, interval: 'auto', formatter: '{value}' }, name: '单位(万)', nametextstyle: { color: '#fff' } }, { type: 'value', splitline: { show: true, linestyle: { color: '#021439', width: 1 } }, axisline: { linestyle: { color: '#1f7eff', width: 1 } }, axislabel: { show: true, textstyle: { color: '#fff' }, fontsize: 11, interval: 'auto', formatter: '{value}' }, name: '单位(万)', nametextstyle: { color: '#fff', fontsize: 11, } } ], series: [ { name: '每月预计支出', barwidth: '30%', type: 'bar', itemstyle: { normal: { linestyle: { color: '#e09c19' }, color: '#5184f2', } }, yaxisindex: 0, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 data: [ 0 , 0 , 6 , 17 , 22 , 26 , 41 , 48 , 59 , 69 , 75 , 90 ] }, { name: '每月实际支出', barwidth: '30%', type: 'bar', itemstyle: { normal: { linestyle: { color: '#e09c19' }, color: '#ff991e', } }, yaxisindex: 0, data: [ 0 , 0 , 10 , 15 , 25 , 30 , 35 , 50 , 55 , 70 , 80 , 85 ] }, { name: '累计预计支出', barwidth: '30%', type: 'line', itemstyle: { normal: { linestyle: { color: '#e63234' }, fontsize: 11, color: '#e63234', } }, symbol: 'circle', symbolsize: 10, //折线点的大小 yaxisindex: 1, ////使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用。 data: [ 0 , 0 , 6 , 23 , 45 , 71 , 112 , 160 , 219 , 288 , 363 , 453] }, { name: '累计实际支出', barwidth: '30%', type: 'line', itemstyle: { normal: { linestyle: { color: '#42c96e' }, fontsize: 11, color: '#6ac3f1', } }, symbol: 'circle', symbolsize: 10, //折线点的大小 yaxisindex: 1, data: [ 0 , 0 , 10 , 25 , 50 , 80 , 115 , 165 , 220 , 290 , 370 , 455 ] }, ], } ; chart1.setoption(option); </script> </html>
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论