项目中用了屡次Echarts图表,因为内置属性太多,今天对柱状图、折线图样式以及渲染方法作一个总结。ajax
(1)柱状图canvas
<div id="bookCount" style=" width: 500px;height: 500px;"></div>
$(function () { initbookStatusCount(); bookStatusCountajax(); }); var myChart; function bookStatusCountajax() { // -----异步加载数据----- statusArr = ['简爱', '富兰克林自传', '假如给我三天光明', '百年孤独', '呐喊']; arichdataArr = [10, 30, 80, 50, 5]; myChart.setOption({ //动态数据渲染 xAxis: [{ data: statusArr }], series: [{ data: arichdataArr }] }); }; function initbookStatusCount() { statusArr = []; //数据初始值 arichdataArr = []; myChart2 = echarts.init(document.getElementById('bookCount')); //初始Echarts实例 option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', //设置echarts于canvas的相对位置 right: '4%', top: '6%', bottom: '12%', containLabel: true }, xAxis: [ { type: 'category', data: statusArr, //x轴显示值 axisTick: { //是否显示x轴线的刻度 show: false }, splitLine: { show: false },//去除垂直于x轴的网格线 axisLine: { lineStyle: { type: 'solid', color: '#ff0',//x轴线的颜色 width: '0'//坐标线的宽度;当为0时,则隐藏x坐标轴 } }, axisLabel: { textStyle: { color: '#cfcfcf',//坐标值得具体的颜色 } } } ], yAxis: [ { type: 'value', name: '单位:件', //可用于标明统计单位 splitLine: { show: false, lineStyle: { color: ['#002165'], width: 1, type: 'solid' } }, axisTick: { show: false }, axisLine: { lineStyle: { type: 'solid', color: '#cfcfcf', width: '0' } }, axisLabel: { textStyle: { color: '#cfcfcf' } } } ], series: [ { name: '档案数量', //可用于显示统计目的 type: 'bar', barWidth: '40%', //柱状图宽度 itemStyle: { normal: { color: function (params) { //柱状图颜色 var colorList = ['#3A97FF', '#A1CDFF', '#3A97FF', '#A1CDFF', '#3A97FF', '#A1CDFF', '#3A97FF', '#A1CDFF', '#3A97FF', '#A1CDFF']; return colorList[params.dataIndex] }, label: { show: true, //显示柱状图统计数值 position: 'top', //显示在每根柱状图上方 textStyle: { //数值样式 color: '#cfcfcf', fontSize: 12 } }, barBorderRadius: [40, 40, 0, 0] //柱状角成椭圆形 }, }, data: arichdataArr //y轴数量 } ] }; myChart.setOption(option); }; window.onresize = function () { //设置统计图可自适应大小 myChart.resize(); }
如图: app
(2)折线图--根据数据实时渲染的方式echarts
<div id="data-monitor" style=" width: 500px;height: 500px;"></div>
$(function () { initHisMonitor(); getHisData(); setInterval(getHisData, 3000); //每3秒从新请求一次数据 }); var wdata = [], sdata = [], otherdata= [], time = []; var myChart; function getHisData() { app.get('数据请求地址', {}, function (msg) { if (wdata.length < 100) { //限制显示的数据最大量 wdata.push(msg.row.data.wd); sdata.push(msg.row.data.sd); otherdata.push(msg.row.data.tvoc); time.push(msg.msg); } else { wdata.shift(); sdata.shift(); otherdata.shift(); time.shift(); wdata.push(msg.row.data.wd); sdata.push(msg.row.data.sd); otherdata.push(msg.row.data.tvoc); time.push(msg.msg); } myChart.setOption({ xAxis: [{ data: time }], series: [{ data: wdata }, { data: sdata }, { data: otherdata }] }); }) } function initHisMonitor() { myChart = echarts.init(document.getElementById("data-monitor")); option = { tooltip: { //悬浮提示框 trigger: 'axis', axisPointer: { animation: false } }, legend: { //统计图图例 data: [ { name: '温度', textStyle: { color: '#FF7200' }, icon: 'image://./images/icon1.png' //能够自定义图标,格式为'image://+icon文件地址' }, { name: '湿度', textStyle: { color: '#009CFF' }, icon: 'image://./images/icon2.png' }, { name: '其余', textStyle: { color: '#00FFAE' }, icon: 'image://./images/icon3.png' }], x: 'center', //图例位置 top: 90, textStyle: { color: '#53b0ff' } }, grid: { //统计图位置 x: '10%', y: 120, x2: 60, y2: 40, borderWidth: 1 }, xAxis: [{ type: 'category', name: '时间', boundaryGap: false, //坐标轴两边是否留白 data: time, splitLine: { show: false },//去除垂直于x轴的网格线 axisLine: { lineStyle: { type: 'solid', color: '#002165',//x轴线的颜色 width: '1'//坐标线的宽度 } }, axisLabel: { textStyle: { color: '#53b0ff',//坐标值的具体的颜色 } } }], yAxis: [{ type: 'value', splitLine: { show: true, lineStyle: { color: ['#002165'], width: 1, type: 'solid' } }, axisTick: { show: false }, axisLine: { lineStyle: { type: 'solid', color: '#53b0ff', width: '0' } }, axisLabel: { textStyle: { color: '#53b0ff', } } }], series: [{ type: 'line', name: '温度', symbol: 'circle', //折线节点 symbolSize: '6', //折线节点大小 data: wdata, itemStyle: { normal: { color: '#FF7200', lineStyle: { color: '#FF7200' } } } }, { type: 'line', name: '湿度', symbol: 'circle', symbolSize: '6', data: sdata, itemStyle: { normal: { color: '#009CFF', lineStyle: { color: '#009CFF' } } } }, { type: 'line', name: '其余', symbol: 'circle', symbolSize: '6', data: otherdata, itemStyle: { normal: { color: '#00FFAE', lineStyle: { color: '#00FFAE' } } } }] }; myChart.setOption(option); }
如图:异步