Background: These days I am doing the report form of Hong Hanlin. Use echarts. Git to get a new feature. Three reports. Two days of static page drawing. Today, let’s sort out what we’ve learned.

Know the echarts

Echarts official website address



There are many legends in it. So what I’m going to use for now isThe pie chartPieandA histogramBar.

Practice the pie chartPie
  • First look at the implementation effect:



As can be seen from the above figure, the actual coverage is pie chart. That’s what we’re going to use hereechartsthePie.

  • Implement logic:
< ion-row-content-between bb0 <div no-margin class=" text-indent "style='border-bottom: none! important; '> <span style='margin:0px 0px 10px 0px; color: #14a3d9; display: block; </span> <div style="position: relative; margin-left: 10%;" > <img src="assets/icon/actual.png" alt="" style="width: 80px; margin-left: 40%;" <p class='number' </p> > </div> </div> <div no-div class=" margin-bottom: none "style=" border-bottom: none "style=" border-bottom: none! important; '> <span style='margin:0px 0px 0px -40px; color: #d98a14; display: block; </span> > <div #chart1 style='width:100px; height:100px; ' ></div> </div> </ion-row>
Export class visitReportPageNew {@viewChild ("chart1") chart1: ElementRef; ionViewWillEnter() { this.setChart1(); } setChart1() { const ec = echarts as any; const container = this.chart1.nativeElement; const chart = ec.init(container); Chart.setOption ({title: {show: true, x: "center", y: "center", text: 85 + "%", itemGap: 0, itemGap: 0, textStyle: { fontSize: "13", color: "#d98a14", }, subtext: "", subtextStyle: { fontSize: "13", color: "#5B697A", fontWeight: "600", }, }, color: ["#d98a14", "#f1dbbb"], series: { name: "", type: "pie", radius: ["72%", "82%"], avoidLabelOverlap: true, hoverAnimation: false, labelLine: { normal: { show: false, }, }, data: [ { value: 85, name: "" }, { value: 15, name: "" }, ], }, }); }}
  • There’s also the CSS and the code for the module.ts page that I won’t put in there.
  • Here are some basic parameters to keep in mind.
  1. series.type: Define the shape of the graph
  2. series.radius: Size of the graph, the first parameter is the outer ring, the second parameter is the inner ring
  3. color: Color of the graph. The first parameter is the main color of the distribution circle, and the second parameter is the color of the remaining content
  4. title.text: Text in the middle of the figure
  5. title.textStyle: The style of the text in the middle of the graph
  6. series.dataRatio:
Practice a slightly more complex version of the pie chartPie
  • First look at the implementation effect:



The graph above showing the distribution of visits by visits is a slightly more complex version of the pie chart.

Take a look at the code:

<ion-card> <div class="visit-number"> <div no-margin class=" mso-12 echarts-title" style='border-bottom: none ! important; '> <p style="font-size: 12px; color: #999999;" </p> > <div #chart2 style='width:300px; height:300px; margin-top: 20px; '></div> </div> </div> </ion-card>
Export class visitReportPageNew {@viewChild ("chart2") chart2: ElementRef; ionViewWillEnter() { this.setChart2(); } setChart2() { const ec = echarts as any; const container = this.chart2.nativeElement; const chart = ec.init(container); Chart. SetOption ({tooltip: {name: "accounted for", the trigger: "item," backgroundColor: "rgba,0.8 (255255255)," textStyle: {color: "black", }, formatter: function (params) { return (params.marker + params.name + " : "Value + + params." people "+" (" + params. Percent + ") "); }, position: [10, 10], }, color: ["#4584DC","#14A3D9","#5FBFE4","#2FC691","#F3B73B","#F0D7A2","#DC6025",], legend: { show: "true", orient: "horizontal", x: "center", bottom: "6%", itemWidth: 15, itemHeight: 15, itemGap: 15, data: [" VisitTarget 1", "VisitTarget 2"," VisitTarget 3", "VisitTarget 4"," VisitTarget 5"], textStyle: {color: "#535E6C", opacity: 0.7,},}, // Graphic: {elements: [{type: "text", style: {text: '%', fill: "#98A6B7", fontSize: 14, textAlign: "center", fontWeight: 800, }, left: "center", top: "32%", }], }, series: [{ name: "", type: "pie", radius: ["30%", "40%"], center: ["50%", "34%"], AVOIDLABeloverlap: true, Label: {normal: {formatter: '{d} time', BorderWidth: 0, BorderRadius: 4, fontWeight: "bold", padding: [-20, -35, 0, -25], // Rich: {a: {// color: "#606C7B", fontSize: 14, // fontSize}, hr: {width: "100%", borderWidth: 0.5, height: 0,}, b: {// fontSize: 14, // fontSize}, hr: {width: "100%", borderWidth: 0.5, height: 0,}, b: {// fontSize: 14, // fontSize: "#606C7B", }, }, }, }, labelLine: { show: true, length: 25, length2: 35, }, data: [ { value: "1", name: "Call objectives 1,"}, {value: "2", the name: "call objectives 2",}, {value: "3", the name: "visit to 3",}, {value: "4", the name: "visit to 4,"}, {value: "5", name: "visit purpose 5",},],}],}); }}
  • That code is a little bit more…. Possible learned later skilled code becomes streamlined…
  • To tidy up the attributes learned from this slightly more complex pie chart:
  1. series.label.normal.formatter: Text description extending out of pie chart block.
  2. series.center: The position of the graph in its region.
Practice bar chartBar
  • First look at the implementation effect:



The distribution of the mechanism in the figure above by grade is shown in a bar chart

<ion-row> <div no-margin class=" max-width: 100%; box-sizing: border-bottom: none "style='border-bottom: none! important; '> <span style='color: #999999; </span> > <div #chart1 style='width:300px; min-height:200px; ' ></div> </div> </ion-row>
Export class visitReportPageNew {@viewChild ("chart1") chart1: ElementRef; ionViewWillEnter() { this.setChart1(); } setChart1() { const ec = echarts as any; const container = this.chart1.nativeElement; const chart = ec.init(container); chart.setOption({ xAxis:[{ type: "category", data: [' class A ', 'B', 'C', 'D'], axisTick: {alignWithLabel: true,}, boundaryGap: [' 20% ', '20%']}], yAxis: [{show: false, }], series:[{ name:'', barWidth: 10, data: [60, 76, 55, 19], type: 'bar', color: '#32a3e7', label: { show: True, the position: 'top', the formatter: "{c}" + "home", color: # 000000,}}}); }
  • The bar chart is a little simpler. I’m going to hide the Y axis, and I’m going to change the X axis. Add graphic text.
  • Attribute value introduction learned:
  1. yAxis.show: whether to show the Y axis
  2. series.barWidth: Coarser adjustment of the histogram
  3. xAxis.axisTick.alignWithLabel: Scale display
To sum up what I’ve learned:
  • Recognize and use echarts accordingly.
  • Many problems and requirements are encountered by some people, if the official API did not find, directly sogou search. It might have been quicker.
  • The official node to open a graph will go directly to the instance page. You can modify the view in real time. You can do it on the instance page first. After achieving the desired results, copy the code you just implemented into the project (because the old projects you maintain are slow to start up and hot deploy each time… So it’s useful for me to edit it online in real time.)
  • Just because a project doesn’t take effect after hot deployment doesn’t mean you wrote something wrong. Let’s run the project again and see.
  • If you’re not in a hurry, keep naming your methods and variables! Develop good habits! Don’t be like me… I’ll change…