option = { legend: { data: ["新用户", "访问用户", "累计用户"], left: 0, }, tooltip: { trigger: "axis", backgroundColor: "#fff", borderRadius: 4, extraCssText: "box-shadow:0px 0px 10px 6px rgba(170,170,170,0.51); ", textStyle: { fontSize: 16, color: "#333", }, formatter: function (params) { var value = params[0].name; return ( "

" + "" + value + "" + "" + params[0].seriesName + ":" + "" + params[0].value + "" + "" + "" + params[1].seriesName + ":" + "" + params[1].value + "" + "" + "" + params[2].seriesName + ":" + "" + params[2].value + "" + "" + "

" ); }, axisPointer: { lineStyle: { color: "#E1E1E1", }, }, }, color: ["#078B54", "#F38027", "#0851A5"], grid: { left: 40, bottom: 30, right: 20, top: 60, }, xAxis: { type: "category", data: [ "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", "09-04", ], axisLabel: { color: "#333333", }, axisTick: { show: false, }, axisLine: { lineStyle: { // 设置x轴颜色 color: "#EFF0F1", }, }, }, yAxis: { type: "value", min: 0, axisLabel: { color: "#999999", }, axisTick: { show: false, }, axisLine: { lineStyle: { // 设置x轴颜色 color: "#EFF0F1", }, }, splitLine: { show: true, lineStyle: { color: "#F5F5F5", type: "solid", }, }, }, series: [ { name: "新用户", data: [ 100, 20, 10, 30, 30, 100, 20, 10, 20, 40, 400, 20, 40, 40, 10, 10, 10, 54, 7, ], type: "line", symbol: "circle", symbolSize: 8, smooth: 0.1, itemStyle: { borderWidth: 2, borderColor: "white", }, }, { name: "访问用户", data: [ 10, 20, 100, 301, 30, 30, 20, 10, 20, 40, 40, 10, 10, 10, 54, 70, ], type: "line", symbol: "circle", symbolSize: 8, smooth: 0.1, itemStyle: { borderWidth: 2, borderColor: "white", }, }, { name: "累计用户", data: [ 10, 20, 300, 30, 30, 300, 230, 10, 20, 40, 40, 20, 40, 40, 10, 10, 10, 54, 70, ], type: "line", symbol: "circle", symbolSize: 8, smooth: 0.1, itemStyle: { borderWidth: 2, borderColor: "white", }, }, ], };

Echarts在线免费图表