start

Using echarts

Import echarts import * as echarts from "echarts" in main.js; 3. Bind Echarts to the vue prototype in mian.js to facilitate multiple pages 4. Use <div ref="drawLineContentTrend" v-loading=" load.pie "elemental-loading-text =" Data loading" in the page component element-loading-background="#f6f8ff" id="content" :style="{ height: '320px' }"></div> this.barChart = this.$echarts.init(document.getElementById("drawLineContentTrend")); this.barChart.setOption({ backgroundColor:"", color:"", title:{ }, tooltip:{ }, toolbox:{ }, legend:{ }, grid:{ }, xAxis:{ }, yAxis:{ }, series:{ }, }) 5. The default unit is PX, set without units, you can %, color Settings can be hexadecimal, can also be RGB, RGBACopy the code

attribute

Sets the background color of echarts

backgroundColor: "#FFFFFF"
Copy the code

The default color swatches

color: ["#4394FF"."#2B43DA"."#DB2293"."#AB74FF"] - The color of each legend will be taken from the paletteCopy the code

Chart title setting

Title :' title ', subtext:' subtitle ', show:true,// Controls the display and hiding of the title module, default true, x: // 'center' takes 'right' {number} (x, unit: px) 'y' : // 'top', default position is the top, optional: // 'top' base 'center' // (y coordinates, unit px) backgroundColor: BorderWidth: 0, in units of px, defaults to 0 (no border) padding: TextStyle: {fontSize: {itemGap: itemGap: 10, itemGap: itemGap: 10, itemGap: itemGap: 10 18, fontWeight: 'bolder, color: # 333, / / main title text color... }, subtextStyle: {same as main title}Copy the code

Tooltip related (shown in the red box)

1. Basic: show: true, // whether to display trigger: 'axis', // When trigger is' item', only the data of the point will be displayed, and when it is' axis', the corresponding data of all coordinate axes under this column will be displayed. TriggerOn: 'Mousemove ', // Trigger timing default mousemove' mousemove' is triggered when the mouse moves. //'click' triggered when the mouse is clicked. 'mousemove | click' at the same time the mouse and click on the trigger. Enterable: false, // Whether the mouse can enter the floating layer of the prompt box, the default is false, // For detailed interaction, such as adding links, buttons, can be set to true. ShowDelay: 20, // display delay can avoid frequent switching, unit ms hideDelay: 100, // hideDelay, unit ms transitionDuration: 0.4, // animation transform time, unit s borderRadius: 4, // hint border rounded corner, unit px, default is 4 backgroundColor: '#FFFFFF', // hint box float layer backgroundColor. BorderColor: '#333', // the borderColor of the float layer of the prompt box. BorderWidth: 0, // the borderWidth of the float layer of the prompt box. TextStyle: {// the textStyle of the float. color: '#fff', fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'sans-serif', fontSize: 14, }, extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); ', // Attach additional CSS styles to the float layer, // For example, margin,opacity, and even top padding can also be set here -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 2. The toolTip display data processing or insert another legend: 1. Formatter: "{a} <br/>{b} : {c} ({d}%)", // A represents the name of the legend, B represents the name of the selected attribute, C represents the value of the selected attribute, d represents the percentage 2. // Create a chart canvas Formatter under each chart: Function (param) {param setTimeout(function() {that. ChildRegByChart (param, "regChart"); }, 100); <div style='width:320px; height:150px' id='regChart'></div>"; return res; } childRegByChart(param, ele) {this.childrenData = []; for (let i in name) { this.childrenData.push({ value: name[i].data, name: name[i].seriesName }); } var myChart = this.$echarts.init(document.getElementById(ele)); Mychart.setoption ({where normal Settings legend properties and data})},Copy the code

Toolbox (shown in circles)

Toolbox: {// visual toolbox show: true, feature: {dataView: {// dataView show: true}, restore: {// reset show: true}, dataZoom: {// Data zoom view show: true}, saveAsImage: {// save images show: true}, magicType: {// dynamic type switch type: ['bar', 'line']}},Copy the code

Legend property Settings (shown circled)

Data :[],// data show: true, // Whether to display type: "plain", // legend type 'plain': common legend 'Scroll ': page-turning legend zlevel: 1, // Zlevel value of all graphs. Icon: "circle", / / figure shape top: "5%", / / bottom: "20%" / / component container from right: "5%", / / the left: "10%" / / / / components the distance from the container width: "Auto ", // The width of the legend component can be set to either value or percentage value. Height: "auto", // The Orient of the legend component: "horizontal", // The layout orientation of the legend list. Horizontal 'vertical' align: "auto", // Horizontal 'vertical' align: "auto", ItemGap: 20, // Legend the interval between each item. ItemHeight: 14, // The graphic height of the legend marker. SymbolKeepAspect: true, // If the icon (possibly from the series symbol or user-defined legend.data.icon) is of the form PATH ://, whether to keep the aspect ratio of the figure when zooming. SelectedMode: true, // The mode selected by the legend, inactiveColor: "# CCC ", // the color when the legend is turned off. TextStyle: {color: "#556677", // Text color. FontStyle: "normal", // fontStyle. FontWeight: "normal", // The size of the font. 'normal' 'bold' 'bolder' 'lighter' ......... Rich: {a: {color: "red", lineHeight: 10,}, b: {color: "# FFF ", lineHeight: 10,} 10,},// Rich to use with formatter} formatter: Function (name) {to illustrations show special processing, style textSty rich style will be used Finally return return format name + "{" + rich attribute +" | "+ value +"} ", the value will use the style of the rich inside}, using illustration belowCopy the code

Grid (Control chart size)

x: 80, y: 60, x2: 80, y2: 60, // width: {totalWidth} - x - x2, // height: {totalHeight} - y - y2, backgroundColor: 'rgba (0,0,0,0), borderWidth: 1, ` borderColor: #' CCC '... // Set the legend to be associated with the legend itself, either by value or percentageCopy the code

XAxis, yAxis (Axis Settings)

Name: "axis category name" position: 'bottom', / / position nameLocation: 'end', / / axis name location, support 'start' | 'end' boundaryGap: NameTextStyle: {color: "#505B85", fontSize: 12}, textStyle: AxisLine: {// Axis text set color: "#505B85", // change the axis text color fontSize: 14 // change the axis text size} axisLine: {// axis text show: LineStyle: {// lineStyle: {color: '#48b', width: 2, type: 'solid'}}, axisTick: {// the scale of the axes show: true, // the property show controls whether to display inside: false, // Control whether small tags in the grid length :5, // the property length controls the length of the line lineStyle: {// lineStyle controls lineStyle color: '#333', width: 1}}, axisLabel: {// each coordinate text show: true, textStyle: {// the rest of the attributes default to the global TEXTSTYLE, see TEXTSTYLE color: '#333'} Index (*, * * value *) = > {* / / specific logic, such as take a month only word * if (value. IndexOf (" month ")! == -1) return true; return false; LineStyle: {color: ['# CCC '], width: 1, type: lineStyle: {color: ['# CCC '], width: 1, type: 'solid'}}, splitArea: {// Separate areas show: false, // do not display by default, property show controls whether to display areaStyle: {// attribute areaStyle control areaStyle color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}}Copy the code

series

Name :" name "type :" pie"//pie,bar,lines etc data:[]// "#2B43DA",// color there are many other attributes here, and the format varies according to the type of graphics.Copy the code

Some of the problems I still remember

1.There is a chart instance already initialized on the dom. Reason: Binding Echarts to a Vue prototype in vue encapsulates a method to create echarts in the vue prototype, so every time this method is called the chart created will use the same DOM node and will be warned in the console. Solution: Call 'echarts.getInstanceBydom ()' to determine if an echarts instance already exists, and initialize it if not. This. MyChart = this.$echarts.getInstanceBydom (document.getelementById ("drawLineContentTrendTwo")); If (this.myChart == null) { $echarts.init(document.getelementById ("drawLineConten tTrendTwo")); } ------------------------------------- ------------------------------------- 2.echarts series not exists. Legend data Should be same with series name or data name cause: legend name and series name do not match. Check the legend of the data is evaluated with the name of the series -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 3. Echarts cancellation Solution: this. MyChart. The clear (); -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 4. Encapsulate Echarts into components in vue and hide more than one in a single page by v-show. The style properties set by two ICONS affect each other: use V-if; 5.Cannot read properties of NULL (reading 'getAttribute') When echarts instances exist on two pages, the data interface of one page is not adjusted properly, and the page is switched before the instance is generated. As a result, the DOM node cannot be found after the production instance. this.$refs.drawLineContentTrend) { return; }Copy the code