Rumah > hujung hadapan web > tutorial js > vue.js将echarts封装为组件一键使用

vue.js将echarts封装为组件一键使用

小云云
Lepaskan: 2018-01-26 10:27:40
asal
1890 orang telah melayarinya

做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装。

Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件,本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

控件演示


控件使用

概要

  • 基于echarts的二次封装

  • 由数据驱动

  • 控件源码见src/components/charts

文档

props

属性 说明 类型
_id 图表唯一标识,当id重复将会报错 String
_titleText 图表标题 String
_xText x轴描述 String
_yText y轴描述 String
_chartData 图表数据 Array
_type 图表类型,提供三种(LineAndBar/LineOrBar/Pie)

调用示例


1

2

3

4

5

6

7

8

<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]]

Salin selepas log masuk

实现方式

创建一个待渲染的dom


1

2

3

<template>

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

</template>

Salin selepas log masuk

绘制函数


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

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: &#39;&#39;,

  x:&#39;center&#39;

  },

  tooltip : {

  trigger: &#39;item&#39;,

  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;

   }

   }

  }

  ]

 })

 }

Salin selepas log masuk

挂载结束、数据源改变时重绘


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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

 }

}

Salin selepas log masuk

相关推荐:

echarts实现的循环生成图效果示例分享

在vue中添加Echarts图表使用详解

Echarts用法详细介绍

Atas ialah kandungan terperinci vue.js将echarts封装为组件一键使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan