I have used the ECharts chart for many times, and I had to check the document every time I used it, and also wanted to record it, but I was always busy with my work at hand or did not implement the article because of laziness. This time, I took the opportunity to record the pain during the holiday. The following code is based on ECharts 5.0.0 version. You can use the ECharts example directly. The comments should be sufficient. If you have any questions, please leave a comment.
Horizontal bar chart
// const YDataTextStyle = {color: "#C1E0F9", fontSize: 13, align: "right", fontFamily: "PingFangSC-Regular", }; option = { grid: { top: 10, left: 75, bottom: 10, right: 20, }, xAxis: { type: "value", show: false, }, yAxis: {// coordinate axis axisLine: {show: false,}, // coordinate axis axisTick: {show: false,}, // coordinate axis data data: [{value: "visit ", textStyle: YDataTextStyle}, {value: "Security risk ", textStyle: YDataTextStyle}, {value:" Epidemic prevention and control ", textStyle: YDataTextStyle}, {value: "security risk ", textStyle: YDataTextStyle}, {value: "City Appearance Environment ", textStyle: YDataTextStyle}, {value:" Rental housing management ", textStyle: YDataTextStyle}, {value: "social order ", textStyle: YDataTextStyle}, {value: "public service ", textStyle: YDataTextStyle}, {value:" Demolition dispute ", textStyle: YDataTextStyle},],}, series: [{// type: "bar", [377, 452, 645, 730, 824, 945, 967, 1264], // barWidth: 12, "right", valueAnimation: true, fontFamily: "youse", fontSize: 14, color: "#A8DAFC", // {a} : formatter: "{c}", // distance distance: 15,}, // True, // backgroundStyle: {color: "rgba(122,188,248,.04)",}, // borderColor: "# 42 b1f8 borderWidth: 0.2, / / color color: {type:" linear ", x: 0, y: 0, x2:1, y2:0, / / gradient colorStops: [{offset: 0, color: "rgba(123,133,167,0.00)", // 0, offset: 1, color: "Rgba (66177248,0.40)", the color of the / / 100%},],},},},],};Copy the codeThe effect is as follows:
Longitudinal bar chart
Option = {top: 30, left: 35, bottom: 50, right: 10,}, legend: {top: 30, left: 35, bottom: 50, right: 10,}, legend: {bottom: 5, data: [" 查 看 全 文 ", textStyle: { fontFamily: "PingFangSC-Regular", fontSize: 12, color: "#fff", }, }, xAxis: [ { type: "category", axisTick: { show: false, }, axisLabel: { color: "#C1E0F9", fontSize: 13, fontFamily: "PingFangSC-Regular", }, data: [" may ", "June", "July", "August", "September", "October"],},] and yAxis: [{type: "value", the position: "left", axisLine: {show: False, / / abscissa graphics.linestyle: {color: # 9 eacc1, opacity: 0.1,},}, axisLabel: {color: # 8497 ac, fontSize: 12, fontFamily: "pingfangsc-regular ",}, axisTick: {show: false,}, // "# 9 eacc1", opacity: 0.1,,}},},], series: [{name: "hotline", type: "bar", data: [500, 250, 325, 190, 240, 260], // Multiple side-by-side columns set the spacing between the columns barGap: "50%", // column width barWidth: 14, // top text label: {show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: "#65DDBC", formatter: ItemStyle: {// borderColor: "#00E2B4", borderWidth: 0.2, // Color color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "Rgba,0.4 (0226180)," / / bottom color}, {offset: 1, color: rgba (123133167,0.00), / / the top color},],},,}}, {type: Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0 [-11, 0], // Set solid dots symbol: "circle", // Set solid dots symbol: "circle", // Set solid dots symbolSize: 5, // Set solid dots color: "#65DDBC",}, {name: "check ", type: "Bar ", data: [180, 100, 175, 110, 90, 60], // Multiple side-by-side columns set the spacing between the columns barGap: "50%", // column width barWidth: 14, // top text label: { show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: ItemStyle: {// borderColor: "#FFBB40", borderWidth: // color: {type: "linear", x: 0, y: 0, x2: 0, y2:1, colorStops: [{offset: 0, color: "Rgba,64,0.36 (255187)," / / bottom color}, {offset: 1, color: rgba (123133167,0.00), / / the top color},],},,}}, {type: Opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0, opacity: 0 [11, 0], // set the symbol for solid points: "circle", // Set the size of solid points symbolSize: 5, // Set the color of solid points: "#FFBB40",},],};Copy the codeThe effect is as follows:
Circular diagram
/ / color value array const colors = [' # 00 b1ff ', '# 65 DDBC', '# 9070 ca', '# FFBB40', '# EA5B51', '# 0069 ff]. ColorsForChart = [], // data = [11.2, 17.6, 25.6, 9.6, 20.8, 15.2], DataForChart = []; // dataForChart = []; // There are gaps between pie charts, so add fixed gap values between data, add tranparent between colors to create gap between pie charts // Note: Colors. ForEach ((item, index) => {colorsForChart. Push (item, 'transparent'); DataForChart. Push (data [index], 1.5); }); colors.forEach((item, index) => { colorsForChart.push(item, 'transparent'); DataForChart. Push (data [index], 1.5); }); option = { series: [ { type: 'pie', radius: ['93%', '100%'], color: colorsForChart, label: { show: false }, data: dataForChart } ] };Copy the codeThe effect is as follows:
The dashboard
Option = {series: [{type: "gauge", // radius: "85%", // min: 0, // Max: ItemStyle: {color: 0; color: 0; "#65DDBC",}, // Progress: {show: true, width: 3,}, // axisLine: {width: 3, color: [[1, "#213B69"]],},}, // Scale style axisTick: {show: false,}, splitLine: {show: false,}, // scale label axisLabel: {show: false,}, // Title: {show: false,}, // Dashboard details for displaying data detail: {// Center offset offsetCenter: [0, 0], // center textStyle: {color: "#65DDBC", fontSize: 20},}, // dashboard pointer pointer: {show: False,}, // Anchor of pointer in dial: {show: false,}, // Array of data contents in series data: [{value: 16,},],};Copy the codeThe effect is as follows:
