1. Grid is used to indicate the distance from the container, and the value can be used, or the percentage can be used.
grid: { top: '65', right: '10%',//percentage left: '89', bottom: '60' //Numerical value},
2、tooltip
tooltip: { trigger: 'axis',//Used in the chart of the coordinate axis or the like or the like. // Trigger: 'item', // In the chart of uncoatable shafts such as scatter points, pie charts //Set background color, border color, border width backgroundColor: 'rgba(4, 10, 13, 0.6)', borderColor: '#48607f', borderWidth: 1, //Set the font size, color, font of the suspension textStyle: { fontSize: 16, color: '#eeeeef', fontFamily: 'PingFang-SC-Medium', }, padding:[10,25], //Set the way the indicator is displayed when the mouse is suspended axisPointer: { //TYPE: Shadow Indicator Sets Shadow Colors and Transparency by ShadowStyle. Type Type Shadow Want to correspond to ShadowStyle. //Type can be Line, Shadow, None, Cross type: "shadow", shadowStyle:{ color:'rgba(173,190,223,0.15)', }, label: { show: false } }, //For special styles in the suspension box, you can use as follows. formatter: function(params){ let data1 = formatData(params[0].value); let data2 = formatData(params[1].value || 0); let data3 = bytesToSize(params[2].value || 0); let data4 = bytesToSize(params[3].value || 0); let res = params[0].name+`<br/>`+ `<div style =" Width: 10px; Height: 10px; margin-right: 8px; Background-color: # 058cff; display: inline-block "> </ div>` + 'Data Total:' + Data4 + `< BR /> `+ `<div style = "Width: 10px; Height: 10px; border-radius: 5px; margin-rotius: 8px; Background-color: # 058cff; display: inline-block"> </ div> `+ 'Data Total Number : '+ Data2 +' strip '+ `` + `<div style = "Width: 10px; Height: 10px; Margin-Right: 8px; Background-Color: # 10A474; Display: Inline-block"> </ div> `+ 'data increment:' + Data3 +` <br /> `+ `<div style = "Width: 10px; Height: 10px; border-radius: 5px; margin-rotius: 8px; Background-Color: # 10a474; display: inline-block"> </ div> `+ 'data increase : '+ Data1 +' strip ' return res; }},
3, Legend Legend
See Also
Collar Options Strategylegend: { type: 'scroll',//Set the appearance of Legend scroll bar orient: 'horizontal',//Layout of the legend list, horizontal or portrait vertical portrait, horizontal lateral data:legends,//Legend list bottom:0, right:60, width: 195, //Legend Tag Size Style Settings icon: 'circle', itemWidth: 10, itemHeight: 10, itemGap:10,//Interval between the legend (horizontal or longitudinal direction, determined according to Orient) textStyle: { color: '#fff', fontSize: 16, fontFamily: 'PingFang-SC-Medium', padding: [0,0,0,10]， //Rich can customize text style rich: { name: { fontSize: 17, fontFamily: 'PingFang', backgroundColor: 'rgba(1, 9, 23, 0)', borderRadius: 2, color: '#fff', // padding: [5, 10, 5, 6], // width: 52, }, count: { fontSize: 17, width: 58, align: 'right', color: '#fff', padding: [5, 0, 10, 0], } } }, formatter: function (name) { const index = data.findIndex(item => item.name === name); const count = data[index].value; const label = `{Name | Using Name style}` + `{count |Use count style} `; return label; },},
Hereinafter, we will display the above properties by examples. First take the pie chart as an example, you can copy the code directly tohttps://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all Intuitive effects.
1 let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']; 2 let seriesData = [{ 3 Name: "Project a spends", 4 value: "3720", 5 Unit: "Millions" 6 }, 7 { 8 Name: "Type B" cost ", 9 value: "2920", 10 Unit: "Millions" 11 }, 12 { 13 Name: "Project C" spending ", 14 value: "2200", 15 Unit: "Millions" 16 }, 17 { 18 Name: "Project D" spending ", 19 value: "1420", 20 Unit: "Millions" 21 } 22 ]; 23 24 25 26 let nameData = []; 27 seriesData.forEach((item) => { 28 nameData.push(item.name) 29 }); 30 31 option = { 32 grid:{ 33 show:true, 34 top:60, 35 bottom:'20%', 36 left:60, 37 right:'10%' 38 39 }, 40 backgroundColor: 'rgba(0,0,0,0)', 41 color: ['#1a79c9', '#71bcff', '#29b3cc', '#39c77f', '#f99b37', '#ef5150', '#f9db63'], 42 tooltip: { 43 trigger: 'item', 44 backgroundColor: 'rgba(255,255,255,0.85)', 45 borderWidth: 1, 46 borderColor:'rgba(238,238,238,0.85)', 47 // width:remToPx(230/75), 48 height:96, 49 marginTop:16, 50 marginLeft:13, 51 textStyle: { 52 fontSize: 26, 53 color: '#353535', 54 fontFamily: 'PingFang-SC-Medium', 55 }, 56 axisPointer:{ 57 type: 'none', 58 }, 59 formatter: function(params){ 60 return '<span style="display:inline-block;margin-left:13px;margin-right:13px;border-radius:10px;width:12px;height:12px;background-color:' + params.color + ';"></span>'+params.name + '<br/>' +' '+ params.value + params.data.unit 61 // return '{name|' + params.name + '}' + '\n' + '{name|' + (params.data.value/sum*100).toFixed(2)% + '}' 62 }, 63 }, 64 legend: { 65 orient: 'vertical', 66 icon: 'circle', 67 x: '61.7%', 68 y: 'center', 69 data: seriesData, 70 itemWidth: 12, 71 itemHeight: 12, 72 align: 'left', 73 //Due to the use of the length, it is displayed by the Tooltip display. 74 tooltip:{ 75 show:true, 76 }, 77 textStyle: { 78 rich: { 79 name: { 80 align: 'left', 81 // width:100, 82 width: 170, 83 fontSize: 24, 84 color: '#353535', 85 padding: [0, 0, 0, 3], 86 fontFamily: 'PingFang-SC-Medium' 87 }, 88 value: { 89 align: 'right', 90 width: 70, 91 fontSize: 24, 92 color: '#353535', 93 fontWeight: 'bold', 94 padding: [0, 90, 0, 24], 95 fontFamily: 'PingFang-SC-Medium' 96 }, 97 unit: { 98 fontSize: 24, 99 color: '#353535',100 fontWeight: 'bold',101 fontFamily: 'PingFang-SC-Medium'102 },103 104 }105 },106 formatter: function(name) {107 let res = seriesData.filter(v => v.name === name);108 res = res[0] || {};109 //Hocked the length of the label greater than 5110 if(name.length>5){111 name = name.slice(0,5) + '...'112 }113 return '{name|' + name + '} {value|' + res.value + res.unit + '}'114 }115 },116 series: [{117 type: 'pie',118 radius: [107, 157],119 padding: [58, 84, 80, 65],120 center: ['29.6%', '47.57%'],121 data: seriesData,122 hoverAnimation: false,123 label: {124 show: false,125 },126 }]127 };
View Code
The result is shown in the figure:
Corresponding chart as an example:
1 let colorList = ['rgb(26, 121, 200)', 'rgb(57, 199, 127)', 'rgb(249, 155, 55)']; 2 let colorStop = ['rgba(26, 121, 200, 0.2)', 'rgba(26, 121, 200, 0)', 'rgba(57, 199, 127, 0.2)', 'rgba(57, 199, 127, 0)', 'rgba(249, 155, 55, 0.2)', 'rgba(249, 155, 55, 0)']; 3 // console.log('aaa' ,colorStop); 4 let series = []; 5 let data = { 6 data: [6.5, 19.6, -4.6, 5.2], 7 Name: "Title", 8 stack: null, 9 type: "line", 10 XAXIS: [** Manufacturing "," ******* manufacturing "," ****** manufacturing "," ********* manufacturing "], 11 yaxis: ["%"] 12 } 13 14 15 series.push({ 16 name: data.name, 17 type: 'line', 18 symbol: 'emptyCircle', 19 // showSymbol: !data.series[i].closeSymbolShow, 20 symbolSize: 0, 21 data: data.data, 22 lineStyle: { 23 type: 'solid', 24 width: 3, 25 }, 26 areaStyle: { 27 color: { 28 type: 'linear', 29 x: 0, 30 y: 0, 31 x2: 0, 32 y2: 1, 33 colorStops: [{ 34 offset: 0, 35 color: colorStop[0] // 0% color 36 }, { 37 offset: 1, 38 color: colorStop[1], // 100% colors 39 }], 40 // opacity: 0.2, 41 global: false // By default False 42 } 43 } 44 }) 45 46 let paddingTop = '-20'; 47 option = { 48 backgroundColor: 'rgba(0, 0, 0, 0)', 49 color: colorList, 50 grid: { 51 left: 20, 52 right: 40, 53 top: 114, 54 bottom: 65, 55 containLabel: true 56 }, 57 legend: { 58 textStyle: { 59 color: "#000", 60 fontSize: 20, 61 fontFamily: 'PingFang-SC-Medium', 62 padding: [0, 0, 0, 5] 63 }, 64 itemGap: 6, 65 show: false, 66 itemHeight: 14, 67 itemWidth: 30, 68 right: '5%', 69 top: '13%', 70 // icon: "circle", 71 data: data.legends, 72 }, 73 tooltip: { 74 trigger: 'axis', 75 backgroundColor: 'rgba(9, 20, 37, 0.75)', 76 borderColor: '#48607f', 77 borderWidth: 1, 78 textStyle: { 79 fontSize: 18, 80 color: '#fff', 81 align: 'left', 82 fontFamily: 'PingFang-SC-Medium', 83 }, 84 padding: [10, 25], 85 axisPointer: { 86 // type: 'line', 87 type:'shadow', 88 label: { 89 show: false, 90 backgroundColor: '#333' 91 } 92 } 93 }, 94 xAxis: { 95 show: true, 96 triggerEvent: true, 97 type: 'category', 98 nameGap: 15, 99 axisTick: {100 show: false,101 },102 //When there is a negative number, use the horizontal difference between103 axisLine: {104 show: true,105 lineStyle: {106 color: '#F02934',107 width: 1,108 type: "dashed"109 }110 },111 splitLine: {112 //Whether the vertical line shows show, if the display is displayed, the color, the type, width of the line is set via LINESTYLE113 show: true,114 lineStyle: {115 color: '#e1e1e1',116 type: "solid",117 // type: "dashed",118 width: 1,119 }120 },121 axisLabel: {122 rotate: 30,123 margin: 60,124 //It is determined that the length of the abscissa name, the length exceeds the fixed value, and the wrap processing is exceeded.125 formatter: function(value) {126 var res = '';127 if (value.length > 7) {128 res = value.substring(0, 7) + '\n' + value.substring(7);129 } else {130 res = value;131 }132 return res;133 },134 textStyle: {135 fontSize: 22,136 fontFamily: 'PingFang-SC-Medium',137 // padding: [remToPx(20/75), 0, 0, 0],138 139 align: "center",140 __verticalAlign: 'middle',141 color: '#838383'142 },143 },144 data: data.xaxis145 },146 yAxis: {147 show: true,148 name: data.yaxis,149 nameTextStyle: {150 fontSize: 22,151 fontFamily: 'PingFang-SC-Medium',152 color: '#838383'153 },154 type: 'value',155 axisTick: {156 show: false157 },158 axisLine: {159 show: false,160 lineStyle: {161 width: 1,162 color: '#aaa',163 }164 },165 splitLine: {166 show: true,167 lineStyle: {168 width: 1,169 // type: "dashed",170 type:"solid",171 color: '#e1e1e1'172 }173 },174 axisLabel: {175 textStyle: {176 fontSize: 22,177 fontFamily: 'PingFang-SC-Medium',178 color: '#838383'179 }180 }181 },182 series: series183 };
View Code
