vue.js encapsulates echarts as a component for one-click use

When doing projects, in order to make the data display more intuitive, chart-related controls are always used. When it comes to chart controls, the first thing that comes to mind is ECharts, an open source project, and it is not like components such as iview and element-ui. It is so convenient to use, but it requires a small detour. For convenience, ECharts is encapsulated in one layer.

Echarts, Remodal and Pikaday are three third-party components commonly used when we develop backend management websites. This article mainly introduces you to the relevant content about vue.js encapsulating echarts into components for one-click use. I share it for everyone’s reference and study. I won’t say much below, let’s take a look at the detailed introduction.

Control demonstration

##Control usage

Summary

• Secondary encapsulation based on echarts

• Driven by data

• For the control source code, see src/components/charts

Documentation

props

AttributesDescriptionType_idThe unique identifier of the chart, when the id is repeated An error will be reportedString_titleTextChart titleString _xTextx-axis descriptionString_yTexty-axis descriptionString_chartDataChart dataArray##_typeCall example

Chart type, three types are provided ( LineAndBar/LineOrBar/Pie)

 <chart
 :_id="&#39;testCharts&#39;"
 :_titleText="&#39;访问量统计&#39;"
 :_xText="&#39;类别&#39;"
 :_yText="&#39;总访问量&#39;"
 :_chartData="chartData"
 :_type="&#39;Pie&#39;"></chart>
 //测试数据样例 [["类别1",10],["类别2",20]]

Implementation method
Create a dom to be rendered

##

<template>
 <p :id="_id" class="chart"></p>
</template>

Draw Function

function drawPie(chartData,id,titleText,xText,yText) {
 var chart = echarts.init(document.getElementById(id))
 var xAxisData = chartData.map(function (item) {return item[0]})
 var pieData = []
 chartData.forEach((v,i)=>{
  pieData.push({
  name:v[0],
  value:v[1]
  })
 })
 chart.setOption({
  title : {
  text: titleText,
  subtext: '',
  x:'center'
  },
  tooltip : {
  trigger: 'item',
  formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
  orient: &#39;vertical&#39;,
  left: &#39;left&#39;,
  data: xAxisData
  },
  series : [
  {
   name: xText,
   type: &#39;pie&#39;,
   radius : &#39;55%&#39;,
   center: [&#39;50%&#39;, &#39;60%&#39;],
   data:pieData,
   itemStyle: {
   emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
   }
   }
  }
  ]
 })
 }

Mounting is completed and redrawing when the data source changes

 watch:{
  _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:
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
  }
  }
 },
 mounted() {
  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:
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  }
 }

Related Recommended:

Sharing of examples of loop generation chart effects implemented by echarts

Detailed explanation of the use of adding Echarts charts in vue

Echarts usage details

The above is the detailed content of vue.js encapsulates echarts as a component for one-click use. For more information, please follow other related articles on the PHP Chinese website!