Vue-ECharts使用说明
Vue-ECharts使用说明
vue-echarts 是在Apache Echarts官网的echarts使用方法上二次封装的组件,方便我们创建echarts图应用到我们的项目中。
参考:
vue-echarts 官网:https://github.com/ecomfe/vue-echarts
Apache Echarts 官网:https://echarts.apache.org/zh/index.html
1-安装
1、安装echarts、vue-echarts模块
npm insatll echarts vue-echarts
2、如果是vue2(vue version < 2.8.0)的环境,需要安装@vue/composition-api模块
npm i -D @vue/composition-api
2-示例
下面以一个折线图为例子进行说明
<template>
<div style="height: 100%;">
<v-chart class="chart" :option="option" autoresize />
</div>
</template>
<script>
// 官方:按需引入echarts所需的模块
import { use } from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 第三方组件模块
import VChart from 'vue-echarts';
// 注册安装模块(插件)
use([
CanvasRenderer,
LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent
])
export default {
name: 'LineCharts',
components: { //注册组件
VChart
},
data: function() {
return {
option: { //配置选项属性
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
}
}
}
之后,在任意模版页面使用这个折线图的组件即可,也可以按照上面的格式直接在模版页面中使用(代码冗余),使用效果如下:
在上面的示例中,我们引入的第三方模块组件,也就是Vue-echarts这个模块下封装的组件,直接使用该组件我们就不需要按照官网的注册方式去初始化chart的dom元素,也不需要通过setOption去注册option选项配置,简化了操作。
除去引入该组件这部操作,其他部分都是按照echarts官方示例代码中按需引入的方式编写;也就是引入echarts/core中的use注册方法、图例、图例中用到的选项组件模块以及echarts/renderers中的渲染函数。
注意:
有的模块可能没有看到具体在哪里使用,但是如果页面渲染不正常,就可以在游览器控制台看具体是哪一个模块没有引发了报错,根据报错提示信息引入即可。
常见的这类模块比如 GridComponent、TooltipComponent、CanvasRenderer 等。
3-自定义优化图表思路
在上面介绍完了vue-echarts的便捷使用,如果我们需要直接自定义图,一般的步骤是:
- 在Apache Echarts官网的示例中[https://echarts.apache.org/examples/zh/index.html]找到你想要做图的类型(比如折线图、饼图、散点图等),引入大致的代码模块结合vue-echarts进行渲染。
- 基本能够渲染示例之后,你就需要去编写option配置了,该配置复杂的不在数据,其实很多时间是在调整样式,具体每个属性对应的样式调节可以参考Apache Echarts官网的配置API[https://echarts.apache.org/zh/option.html#title]进行查阅。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhkba
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01