A detailed description of how vue.js encapsulates echarts as a one-click component.
This paper mainly introduces the related content of packaging echarts into a one-button component by vue.js, and shares it for your reference. Let's take a look at the detailed introduction.
explain
When doing projects, in order to make the data display more intuitive, we always use the controls related to charts. When it comes to chart controls, of course, I will think that ECharts is an open source project for the first time, but it is not as convenient to use as iview and element-ui, and needs to be slightly bent. For the convenience of the drawing, ECharts is encapsulated.
Control demonstration
Control use
summary
Secondary packaging based on electronic products
Driven by data
See src/components/charts for the control source code.
document
props
attribute
explain
type
_id
Unique identification of the chart. If the id is duplicate, an error will be reported.
line
_ Title text
Chart title
line
_xText
X axis description
line
_yText
Y-axis description
line
_ Chart data
Chart data
rank
_ type
There are three chart types (line/line/pie).
Call example
& lt chart
:_ id =“‘test charts‘“
: _ titletext = "'Traffic Statistics'"
: _ xtext = "'category'"
: _yText= "Total visits"
:_ chart data =“chart data“
:_ type =“Pie““& gt； & lt/chart & gt；
//sample test data]
Realization mode
Create a dom to render.
& lt template & gt
& ltdiv:id =“_ id“class =“chart“& gt。 & lt/div & gt；
& lt/template & gt；
Drawing function
The function drawPie(chart data, id, titleText, xText, yText ){
var chart = echarts . init（document . getelementbyid（id））
var xAxisData = chart data . map（function（item）{ return item【0】}）
var pieData =【】
chart data . foreach（（v，I）= & gt； {
piedata . push （{
Name: v [0],
Value: v [1]
})
})
chart . setoption （{
Title: {
Text: title text,
Subtext:'',
X: "center"
},
Tooltip: {
Trigger: "project",
Formatter:' {a} & ltbr/>; { b }:{ c }（{ d } %）“
},
Legend: {
Direction: "vertical",
Left: "left"
Data: xAxisData
},
Series: [
{
Name: xText,
Type: Pie,
Radius: "55%",
Center: ["50%", "60%"],
Data: pieData,
Project style: {
Key points: {
Shadow blur: 10,
shadowOffsetX: 0，
Shadow color: "rgba (0,0,0,0.5)"
}
}
}
]
})
}
Redrawing when loading ends and the data source changes.
Observation: {
_ chartData（val ）{
Switch (this. _ type ）{
Case "LineAndBar":
drawline andbar（val，this。 _id, this. _titleText，this。 _xText, this. _ yText）；
break
Case "LineOrBar":
drawLineOrBar（val，this。 _id, this. _titleText，this。 _xText, this. _ yText）；
break
Case "Pai":
DrawPie (val, this. _id, this. _titleText，this。 _xText, this. _ yText）；
break
Default value:
drawline andbar（val，this。 _id, this. _titleText，this。 _xText, this. _ yText）；
break
}
}
},
Installed () {
Switch (this. _ type ）{
Case "LineAndBar":
drawLineAndBar（this。 _chartData, this. _id, this. _titleText，this。 _xText, this. _ yText）；
break
Case "LineOrBar":
DrawLineOrBar (this. _chartData, this. _id, this. _titleText，this。 _xText, this. _ yText）；
break
Case "Pai":
DrawPie (this. _chartData, this. _id, this. _titleText，this。 _xText, this. _ yText）；
break
Default value:
drawLineAndBar（this。 _chartData, this. _id, this. _titleText，this。 _xText, this. _ yText）；
break
}
}
abstract