标签:折线 名称 sse zoom 时间 echarts 距离 base cccccc
折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦
var myChart = echarts.init(document.getElementById(‘series-chart‘)); // 指定图表的配置项和数据 var option = { baseOption: { //图表配置标题 title: { text: ‘销量‘, textStyle: { fontSize: 12, fontWeight: 400, color: ‘#000000‘ }, left: 5, top: -5, }, //配置提示信息 tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘shadow‘ } }, color: [‘#FA660A‘, ‘#0E76E4‘, ‘#8923F1‘, ‘#FF0000‘, "#339966"], legend: { show: true, right: ‘15%‘, top: 12, width:300, height:100, icon: ‘rect‘, itemWidth: 10, itemHeight: 4, textStyle: { color: ‘#1a1a1a‘, fontSize: 12, }, data: [], //legend图例也需要动态获取 }, grid: { top: 60, left: 55, right: 75, }, //dataZoom 是控制下方的滑动条的,不需要的可以不用配置。没有截 图出来 dataZoom: [{ //Y轴固定,让内容滚动 type: ‘slider‘, show: false, xAxisIndex: [0], start: 1, end: 50, //设置X轴刻度之间的间隔(根据数据量来调整) zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止) }, { type: ‘inside‘, xAxisIndex: [0], start: 1, end: 50, zoomLock: true, //锁定区域禁止缩放 }, { start: 0, end: 10, showDetail: false, left: "center", //组件离容器左侧的距离,‘left‘, ‘center‘, ‘right‘,‘20%‘ right: "auto", //组件离容器右侧的距离,‘20%‘ bottom: "8%", height: 8, dataBackground: { lineStyle: { width: 0.5, height: 0.5, color: ‘#cccccc‘, type: ‘solid‘, }, }, fillerColor: ‘#ea6100‘, handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘, handleSize: ‘50%‘, handleStyle: { color: { type: ‘linear‘, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: ‘#FA660A‘ // 0% 处的颜色 }, { offset: 1, color: ‘#ea6100‘ // 100% 处的颜色 }], global: false // 缺省为 false }, shadowBlur: 3, shadowColor: ‘rgba(0, 0, 0, 0.6)‘, shadowOffsetX: 1, shadowOffsetY: 1 } } ], //x轴 xAxis: { name: ‘时间‘, // 给X轴加单位 nameLocation: ‘end‘, //时间出现的位置 type: ‘category‘, //x轴文字配置 axisLabel: { show: true, inside: false, align: ‘left‘, // margin: 4, textStyle: { color: ‘#1a1a1a‘, fontSize: ‘10‘ } }, axisTick: { show: false }, //去掉x轴刻度线 data: [], axisLine: { show: false, length: 3, } }, //y轴 yAxis: { axisLabel: { show: true, textStyle: { color: ‘#1a1a1a‘, fontSize: ‘10‘ } }, axisLine: { show: false //y轴刻度线不显示 } }, series: { type: "line", name: "", data: [], }, } }; // 使用刚指定的配置项和数据显示图表。 --> myChart.setOption(option);
下面接口处理的
$.ajax({ type: "get", url: "http://59.108.98.169/salesSearch/?stype =3&startDate=" + startDate + "&endDate=" + endDate + "&brandGroup=" + brandGroup + "&vendorGroup=" + groupGroup + "&seriesGroup=" + seriesGroup, dataType: "jsonp", success: function (json) { console.log(json); // x轴月份 var monthData = []; for (var i = 0; i < item.month_data.length; i++) { var obj = new Object(); obj = item.month_data[i]; var month = obj.substring(5, 7); monthData[i] = month; } console.log(monthData); var legend = []; //设置图例文字 for (var i = 0; i < item.data.length; i++) { var obj = new Object(); obj.name = item.data[i].name; legend[i] = obj; } console.log(legend); var name = []; //设置图标每条线名称 for (var i = 0; i < item.data.length; i++) { var obj = new Object(); obj.name = item.data[i].name; name[i] = obj; } console.log(name); //销量 var saleData = []; for (var i = 0; i < item.data.length; i++) { var obj = new Object(); obj.sales_data = item.data[i].sales_data; saleData[i] = obj; } console.log(saleData); console.log(item.data); //折线图数据 需要重新push var s_data = []; for (var j = 0; j < item.data.length; j++) { s_temp = { name: item.data[j].name, type: "line", symbol: ‘none‘, data: item.data[j].sales_data }; s_data.push(s_temp) } var srtHtml = ""; // 柱状图 需要倒序数组 myChart.setOption({ xAxis: { data: monthData.reverse() }, legend: { data: legend }, series: s_data }); }, error: function () { console.log("请求失败"); } })
标签:折线 名称 sse zoom 时间 echarts 距离 base cccccc
原文地址:https://www.cnblogs.com/cyhsmile/p/12378208.html