摘要:需求如圖用實(shí)現(xiàn),代碼如下,無注釋。指定圖表的配置項(xiàng)和數(shù)據(jù)總量是否平滑顯示
需求如圖:
用echarts實(shí)現(xiàn),代碼如下,無注釋。
var myChart = echarts.init(document.getElementById("main")); var x = new Array(); var optionx = new Array(); var y = new Array(); for(var i = 0; i < chartData.length; i++){ for (item in chartData[i]){ x.push(item); y.push(chartData[i][item]); } } for(var i = 0; i < x.length; i++){ var index1 = x[i].indexOf("-") + 1; optionx.push(x[i].substring(index1,x[i].length)); } // 指定圖表的配置項(xiàng)和數(shù)據(jù) var option = { backgroundColor: "#FCFCFC", tooltip : { backgroundColor: "#17191D", trigger: "axis", axisPointer: { type: "none", label: { backgroundColor: "#6a7985" } }, formatter: function(params, ticket, callback) { return ""; } }, grid: { top: 0, bottom: 36, left: -20, right: -20 }, xAxis :{ type : "category", boundaryGap : false, axisLine : { show: false, lineStyle :{ color : "#C6D2DD" } }, axisLabel: { color : "#666" }, splitLine : { show: true, lineStyle :{ color : "#D7D8DA", type : "dashed" } }, axisTick : { show: false, lineStyle :{ color : "#EBEBEB" } }, data : optionx }, yAxis : { type : "value", axisLine :{ show: false }, axisLabel : { show: false }, splitLine : { show: false }, axisTick : { show: false } }, series : [ { type:"line", stack: "總量", smooth : true, //是否平滑顯示 symbolSize : 6, itemStyle : { color: "#FFD205", borderColor : "#FFD205", borderWidth : 2 }, lineStyle : { color : "#FFD205", width : 4 }, areaStyle : { color : "#FFF", origin : "end", opacity : 1 }, data:y } ] }; myChart.setOption(option);
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/54040.html
摘要:需求如圖用實(shí)現(xiàn),代碼如下,無注釋。指定圖表的配置項(xiàng)和數(shù)據(jù)總量是否平滑顯示 需求如圖:showImg(https://segmentfault.com/img/bVbtS5r?w=824&h=541); 用echarts實(shí)現(xiàn),代碼如下,無注釋。 var myChart = echarts.init(document.getElementById(main)); var x = n...
摘要:七月份的下半個(gè)月,有幸做了奔馳年新官網(wǎng),包括手機(jī)端和端的宣傳頁,地址端手機(jī)端這里,為了證明這個(gè)是一個(gè)事實(shí),我還特意的留存了兩張截圖這里只想說明這么幾個(gè)問題這東西確實(shí)是我做了,而且是那種創(chuàng)意天,開發(fā)兩天,三天測試,天的時(shí)候就要上線的奧美負(fù)責(zé)創(chuàng) 七月份的下半個(gè)月,有幸做了奔馳 Smart 2015年新官網(wǎng),包括手機(jī)端和PC端的宣傳頁,地址: PC端 手機(jī)端 這里,為了證明這個(gè)是一個(gè)事...
閱讀 2333·2023-04-26 00:28
閱讀 3080·2019-08-30 15:55
閱讀 2752·2019-08-30 12:47
閱讀 1562·2019-08-29 11:04
閱讀 3190·2019-08-28 18:14
閱讀 954·2019-08-28 18:11
閱讀 1682·2019-08-26 18:36
閱讀 3397·2019-08-23 18:21