b***n（2020-05-18 13:01:03 ） 对 #7版本 说：

不错，把横坐标轴优化显示了， 我这边更新下，谢谢了~！

j***o（2020-04-30 08:17:12 ） 对 #7版本 说：

// 你没有开保存 这个是我改的一点点优化 觉得不错可以试试 下面是完整代码 //声明jsonp函数 function jsonp(url, callback, callbackname) { //给系统中创建一个全局变量，叫做callbackname，指向callback函数名 //定义一个处理Jsonp返回数据的回调函数 window[callbackname] = callback; //创建一个script节点 var script = document.createElement("script"); script.src = url; script.type = "text/javascript"; document.getElementsByTagName("body")[0].appendChild(script); //将创建的新节点添加到BOM树上 setTimeout(function() { document.body.removeChild(script); //为了不污染页面，把script拿掉 }, 500); } var jsonpURL = 'https://m.look.360.cn/events/feiyan?sv=&version=&market=&device=2&net=4&stype=&scene=&sub_scene=&refer_scene=&refer_subscene=&f=jsonp&location=true&_=1583145636129&callback=jsonp2'; //调用jsonp函数发送jsonp请求的callback jsonp(jsonpURL, function(data) { console.log(data.country); var chartsJSON = data.country; // 发送请求成功后开始执行，data是请求成功后，返回的数据 var provinceName = [], //国家 diagnosed = [], //确诊 diffDiagnosed = [], //新增确诊 cured = [], //治愈 died = []; //死亡 // 取出每一条数据value,作为显示数据 chartsJSON.forEach(function(items, index) { provinceName.push(items.provinceName); diagnosed.push(items.diagnosed); diffDiagnosed.push(items.diffDiagnosed); cured.push(items.cured); died.push(items.died); }); //数组求和 var sumDiagnosed = eval(diagnosed.join("+")), sumDiffDiagnosed = eval(diffDiagnosed.join("+")), sumCured = eval(cured.join("+")), sumDied = eval(died.join("+")); console.log("数据来源：" + "%c" + "https://m.look.360.cn", "color:#00cc00"); console.log("海外累计确诊：" + "%c" + sumDiagnosed, "color:rgb(224, 32, 32)"); console.log("海外新增确诊：" + "%c" + sumDiffDiagnosed, "color:#ff6600"); console.log("海外累计治愈：" + "%c" + sumCured, "color:rgb(17, 191, 199)"); console.log("海外累计死亡：" + "%c" + sumDied, "color:gray"); const mydate = new Date(); var jsonMonth = mydate.getMonth() + 1, subDay = mydate.getDate(); subDay < 10 ? subDay = "0" + subDay : subDay = subDay; var subDate = mydate.getFullYear() + "年" + jsonMonth + "月" + subDay + "日"; //console.log(subDate) var subFunc = [ '截止: ' + subDate + '\n' + '累计确诊: {a| ' + sumDiagnosed + '}', '新增确诊: {b| ' + sumDiffDiagnosed + '}', '累计治愈: {c| ' + sumCured + '}', '累计死亡: {d| ' + sumDied + '}' ].join('\xa0\xa0'); //基于准备好的dom，初始化echarts实例 option = { backgroundColor: '#f8f8f8', //背景色 title: { text: '海外疫情病例趋势图', textStyle: { color: '#000', fontSize: 18 }, itemGap: 5, subtext: subFunc, subtextStyle: { color: '#333', fontSize: 14, rich: { a: { color: '#b61e33', fontSize: 15 }, b: { color: '#ff6600', fontSize: 15 }, c: { color: 'rgb(17, 191, 199)', fontSize: 15 }, d: { color: 'gray', fontSize: 15 } } }, x: 'center' }, tooltip: { trigger: 'axis', //axis , item axisPointer: { type: 'line', //'line' | 'cross' | 'shadow' | 'none lineStyle: { color: '#c9caca', width: 1, type: 'dotted' } }, x: 'left', textStyle: { fontSize: 14 } }, grid: { top: '12%', right: '2%', bottom: '10%', left: '7%' }, legend: { data: ['确诊', '新增确诊', '治愈', '死亡'], x: 'right' }, xAxis: { type: 'category', axisLabel: { rotate: 45, interval: 0, //类目间隔 设置为 1，表示(隔一个标签显示一个标签) textStyle: { color: '#333', fontSize: 12 }, formatter: '{value}' }, axisLine: { lineStyle: { color: '#ccc', width: 1 } }, splitLine: { show: true, lineStyle: { color: 'rgba(102,102,102,.1)', //纵向网格线颜色 width: 1, type: 'dashed' } }, axisTick: { show: true //坐标轴小标记 }, data: provinceName //载入横坐标数据 }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#333', fontSize: 12 }, formatter: '{value}' }, splitNumber: 4, //y轴刻度设置(值越大刻度越小) axisLine: { lineStyle: { color: '#ccc', width: 1 } }, splitLine: { show: true, lineStyle: { color: 'rgba(102,102,102,.1)', //横向网格线颜色 width: 1, type: 'dashed' } } }, color: ['#b61e33', 'rgb(255, 160, 25)', 'rgb(17, 191, 199)', 'rgba(77, 80, 84, 0.7)'], dataZoom: [ // { // type: "slider", // show: false, // start: 0, // end: (7 / data.length) * 100, // handleSize: 8 // }, { type: "inside", start: 0, end: 7 }, // { // type: "slider", // show: false, // yAxisIndex: 0, // filterMode: "empty", // width: 12, // height: "70%", // handleSize: 8, // showDataShadow: false, // left: "90%" // } ], series: [{ name: '确诊', type: 'line', //line symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' symbolSize: 12, //曲线点大小 label: { normal: { show: true, position: 'top' } }, lineStyle: { normal: { width: 2 } }, smooth: true, data: diagnosed //载入数据 }, { name: '新增确诊', type: 'line', //line symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' symbolSize: 12, //曲线点大小 label: { normal: { show: true, position: 'top' } }, lineStyle: { normal: { width: 2 } }, smooth: true, data: diffDiagnosed //载入数据 }, { name: '治愈', type: 'line', //line symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' symbolSize: 12, //曲线点大小 label: { normal: { show: true, position: 'top' } }, lineStyle: { normal: { width: 2 } }, smooth: true, data: cured //载入数据 }, { name: '死亡', type: 'line', //line symbol: 'pin', //曲线点样式 'emptyCircle', circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' symbolSize: 12, //曲线点大小 label: { normal: { show: true, position: 'top' } }, lineStyle: { normal: { width: 2 } }, smooth: true, data: died //载入数据 } ] }; //使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var app = { currentIndex: -1, }; setInterval(function() { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: app.currentIndex }); // option.dataZoom[0].start= app.currentIndex + 1; // 　　option.dataZoom[0].end=app.currentIndex + 8; // console.log(app.currentIndex, option.dataZoom[0].end / 100 * dataLen - 2) if (app.currentIndex > option.dataZoom[0].end / 100 * dataLen - 2) { option.dataZoom[0].start = app.currentIndex / dataLen * 100; option.dataZoom[0].end = app.currentIndex / dataLen * 100 + 7; } myChart.setOption(option) app.currentIndex = (app.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: app.currentIndex, }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: app.currentIndex }); }, 3000); }, "jsonp2");

#8 2020-05-18 13:03:18 由 b***n 在 #7 基础上修改

#7 2020-03-30 04:51:21 由 b***n 在 #6 基础上修改

#6 2020-03-30 04:50:18 由 b***n 在 #5 基础上修改

#5 2020-03-04 11:00:21 由 b***n 在 #4 基础上修改

#4 2020-03-04 09:31:01 由 b***n 在 #3 基础上修改

#3 2020-03-04 09:26:47 由 b***n 在 #2 基础上修改

#2 2020-03-03 14:00:44 由 b***n 在 #1 基础上修改

#1 2020-03-03 13:58:13 由 b***n 在 #-1 基础上修改