echarts-package v1.1.8
文档传送门
最新详细文档,请移步文档中阅读
官网文档
依赖环境
因为该库是基于 echarts 来封装的,所以必须要依赖 echarts
echarts
安装使用
步骤一: 下载 npm 包
npm install echarts
npm install echarts-package
步骤二: 引入安装插件
import * as echarts from "echarts"
Vue.prototype.$echarts = echarts
import echartsView from "echarts-package"
Vue.use(echartsView)
步骤三:
在页面上使用组件,在 echarts-package 中默认接收以 name
和 value
命名的属性,以此来渲染页面,后端返回的数据源以参数的形式传入 this.$eChartFn.handleData
方法中处理,将并选择对应的 template
作为渲染模板,最后将方法返回的配置传入 echartsView
组件中,即可渲染数据。
<template>
<div>
<!-- 为 ECharts 传入数据源和定义 -->
<echartsView :chart-option="chartOpt"></echartsView>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
chartOpt: {},
}
},
mounted() {
// 准备好模拟后端返回的数据列表
let data = [
{
name: "小兰",
value: 76,
},
{
name: "小绿",
value: 43,
},
{
name: "小红",
value: 27,
},
]
// 使用内置的 handleData 方法处理数据
this.chartOpt = this.$eChartFn.handleData({ template: "baseBar", data })
},
}
</script>
是的就是这么简单,只需要传入数据源和配置模板即可,效果如下所示
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago