This paper mainly introduces the related content of packaging echarts into a one-button component by vue.js for your reference. Let's take a look at the detailed introduction.
explain
When doing a project, in order to make the data display more intuitive, chart-related controls are always used. When it comes to chart controls, of course, the first thing that comes to mind is ECharts, an open source project, but it is not as convenient to use as iview and element-ui, and needs a small bend. For the convenience of the drawing, ECharts is encapsulated.
Control demonstration
Control use
summary
Secondary packaging based on electronic chart
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 bar/line bar/pie chart).
Call example
& lt chart
:_ id = " " test charts " "
: _titleText= ""Traffic Statistics "
:_ x text = " " category " "
: _yText= ""Total visits "
:_chartData="chartData "
:_ 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(chartData, id, titleText, xText, yText) {
var chart = echarts . init(document . getelementbyid(id))
var xAxisData = chart data . map(function(item){ return item[0]})
var pieData = []
chartData.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 Chart,
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":
drawLineAndBar(val，this。 _id, this. _titleText, this. _xText, this. _ yText)；
break
Case "LineOrBar":
DrawLineOrBar(val, this. _id, this. _titleText, this. _xText, this. _ yText)；
break
Case "Pie":
DrawPie (Val, this. _id, this. _titleText, this. _xText, this. _ yText)；
break
Default value:
drawLineAndBar(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 "Pie":
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