echarts ----漸變色曲線圖表demo
阿新 • • 發佈:2020-10-16
option = { xAxis: { //name: '日期',//y軸名稱 nameGap: 30, type: 'category', boundaryGap: false, //設定x軸的刻度座標展示資料,會覆蓋series中資料的name屬性【也是設定x軸的刻度座標的展示資料,如果這裡沒有設定data,而x軸的刻度座標沒有展示資料的話,這裡可以新增data進行覆蓋展示】 // data: tendencyNameData, axisLabel: {//x軸文字的樣式 show: true, textStyle: { color: '#647CA7', fontSize: '12', left: '20' } }, axisLine: {//x軸的樣式 //設定箭頭方法一 // symbolOffset: 50, // symbolSize: [35, 38], // symbol: ['none', 'arrow'], //只在末端顯示箭頭 //設定箭頭方法二 symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'], symbolOffset: 5,//箭頭與軸線的間距 symbolSize: [35, 38], lineStyle: { color: '#657BA7' } } }, yAxis: { name: '人次', nameGap: 30, type: 'value', splitLine: {//去除網格線 show: false }, //boundaryGap: [0, '30%'], axisLabel: { show: true, textStyle: { color: '#647CA7', fontSize: '12' } }, axisLine: { //只在末端顯示箭頭,但是箭頭的樣式、箭頭與軸線沒有連線等不可調所以用以下方法 symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'],//繪製箭頭 symbolOffset: 5,//箭頭與軸線的間距 symbolSize: [35, 38],//箭頭 大小 lineStyle: { color: '#657BA7' } } }, //設定漸變色需要去掉visualMap屬性 // visualMap: { // type: 'piecewise', // show: false, // dimension: 0, // seriesIndex: 0, // // pieces: [{ // // gt: 1, // // lt: 3, // // color: 'rgba(0, 180, 0, 0.5)' // // }, { // // gt: 5, // // lt: 7, // // color: 'rgba(0, 180, 0, 0.5)' // // }] // }, series: [ { type: 'line', smooth: true,//折點處圓滑,即折線變為圓滑的曲線 // symbol: 'none', // lineStyle: { // color: 'green', // width: 2 // }, itemStyle: { normal: { //顏色漸變函式 前四個引數分別表示四個位置依次為左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#E93CA7' // 0% 處的顏色 }, { offset: 0.4, color: '#EA8FC7' // 100% 處的顏色 }, { offset: 1, color: '#657BA7' // 100% 處的顏色 }] ), //背景漸變色 lineStyle: { // 系列級個性化折線樣式 width: 3, type: 'solid', color: "#E93CA7" //折線的顏色 } } },//線條樣式 symbolSize: 10, //折線點的大小 label: { normal: { show: true, position: 'top', textStyle: { color: 'red' } } }, areaStyle: { normal: {} }, data: [ ['10.1', 200], ['10.2', 400], ['10.3', 650], ['10.4', 500], ['10.5', 250], ['10.6', 300], ['10.7', 450], ['日期', null] ] } ] }; //圖表自適應視窗的大小
window.addEventListener("resize", function () {
tendencyWeekChart.resize();
});