This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

This is the effect, a little crude, no data:

Mainly is to implement the right illustration of paging, tutu cases too much, because the stack sideways shows not beautiful, so want to change to the paging, convenient check, hovering there will also be the value of each illustration, search on the Internet a lot, but the effect is not very good, but also to change source several places, will affect other stack line chart, So let me share some of the features I’ve explored, and it seems to come with Echarts as well, but I didn’t find it in the documentation until I did a lot of searching.

Div is defined first. I define min-width because sometimes when I switch pages or something echarts will shrink. I don’t know if you’ve used this before, but I’m using jquery and layui.

<div id="ddtEchart" style="width: 100%; min-width: 1200px; height: 700px;" ></div>Copy the code

2, start to call the interface to get data, I directly define the value of RES simulation, according to the value returned by their own interface for data assembly, X-axis array, legend array, etc

Function searchddtInfo() {var myChart = echarts.init(document.getelementById ("ddtEchart")); var myChart = echarts.init(document.getelementById ("ddtEchart")); let legendArr = []; let xArr = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00," "13:00," "then", "15:00", "our", "17:00," "18:00", "number", "8", "at", "22:00," "23:00"];; let seriesData = []; Figure 1 let res = {" stack ": [{" name" : "aa", val: "1"}], "stack of figure 2" : [{" name ":" bb ", val: "2"}], "stack of figure 3: [{" name" : "cc", val: "3"}]. Figure 4 "stack" : [{" name ":" dd ", val: "4"}], "stack of FIG. 5: [{" name" : "ee", val: "5"}]. Figure 6 "stack" : [{" name ":" ff ", val: "6"}]} for (let key in res) {legendArr. Push (key); let seriesArr = { name: key, data: [], type: 'line', symbol:'circle', symbolSize:8, showSymbol: false, areaStyle: {}, emphasis: { focus: 'series' } }; if(res[key].length > 0) { for(let i = 0; i<res[key].length; i++) { seriesArr.data.push(res[key][i].val); } } seriesData.push(seriesArr); } let myChartOptions = {// Define the color, echarts will also automatically assign the color to you, here write the color to look good color: ["#b88fca","#ea0472","#fda986","#9a003c","#2743c5","#f0a3db","#75be9c","#9dd3e8","#879bd7","#c52727","#c55127","#c57627" ,"#c5a927","#aec527","#75be9c","#48c527","#27c54f","#27c589","#27c5c3","#279bc5","#2776c5","#fbd88a","#3e27c5","#6a27c5" ,"#9d27c5","#c527ac","#c5276a","#c52746","#ffe700","#22b3f1","#c30c0c","#209607","#03839c","#063ece","#4611d4"], title: {text: 'stack diagram ', left:'center'}, tooltip: {// Hover style trigger: 'axis', axisPointer: {type: "cross", label: {formatter: function (params) { if (params.seriesData.length === 0) { window.mouseCurValue = params.value; } } } }, formatter: function (params) { let res = "", sum = 0; for (let i = 0; i < params.length; i++) { let series = params[i]; sum += Number(series.data); if (sum >= window.mouseCurValue) { res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>"; break; } } return res; },}, legend: {textStyle: {width:'250', overflow: 'break'}, right:0, top: 5, // distance from top to Orient: Data: legendArr, type: 'scroll', // page type height: 665, pageIconColor: legendArr '#1eb2f1', // pageTextStyle:{color: '#222', // pageTextStyle:{color: '#222', // pagiconSize: 18}, // pagiconSize: 18}, dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: 0, } ], grid: { left: '3%', right: '20%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: xArr } ], yAxis: [ { type: 'value', axisLabel: { formatter: '{value}' } } ], series: seriesData }; myChart.setOption(myChartOptions, true); }Copy the code

In legend, you can set vertical pages and horizontal pages, using the latest echarts.js. You can only set the size of the button to switch pages and the color of the flip number.

Echarts will automatically render different colors. I have requirements here, so I have to write this color, but if the amount of data is too much, this color is not enough!

Instead of showing all the other legends at the current time, write formatter in the Tooltip object, use Params to get the legend information for the current hover, and store it in the Windows object. The loop then stops by checking if all legend information is the same as window.mousecurValue, as you can see in the code written in tooltip

It was written before. It took several days to correct the bug. Now it seems to be quite simple.