摘要:需求如圖用實現,代碼如下,無注釋。指定圖表的配置項和數據總量是否平滑顯示
需求如圖:
用echarts實現,代碼如下,無注釋。
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)); } // 指定圖表的配置項和數據 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);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114814.html
摘要:需求如圖用實現,代碼如下,無注釋。指定圖表的配置項和數據總量是否平滑顯示 需求如圖:showImg(https://segmentfault.com/img/bVbtS5r?w=824&h=541); 用echarts實現,代碼如下,無注釋。 var myChart = echarts.init(document.getElementById(main)); var x = n...
摘要:七月份的下半個月,有幸做了奔馳年新官網,包括手機端和端的宣傳頁,地址端手機端這里,為了證明這個是一個事實,我還特意的留存了兩張截圖這里只想說明這么幾個問題這東西確實是我做了,而且是那種創意天,開發兩天,三天測試,天的時候就要上線的奧美負責創 七月份的下半個月,有幸做了奔馳 Smart 2015年新官網,包括手機端和PC端的宣傳頁,地址: PC端 手機端 這里,為了證明這個是一個事...
閱讀 2351·2021-11-25 09:43
閱讀 2864·2021-11-24 09:39
閱讀 2926·2019-08-30 11:10
閱讀 1130·2019-08-29 16:34
閱讀 595·2019-08-29 13:25
閱讀 3358·2019-08-29 11:21
閱讀 2861·2019-08-26 11:39
閱讀 2394·2019-08-26 11:34