v-charts组件化示例及动态传参

注意：echarts 安装5.0以下的版本，否则会报错，5.0以上的引入方式不同  "echarts": "^4.9.0","v-charts": "^1.19.0"
npm install echarts v-charts -S

//在main.js 中，按需加载v-charts组件
import VePie from 'v-charts/lib/pie.common';//饼图
import VeHistogram from 'v-charts/lib/histogram.common';//柱状图
import VeRing from 'v-charts/lib/ring.common';// 环形图
import VeLine from 'v-charts/lib/line';//折线图
Vue.component(VePie.name, VePie);
Vue.component(VeHistogram.name, VeHistogram);
Vue.component(VeRing.name, VeRing);
Vue.component(VeLine.name, VeLine);

//折线图组件，chartLine.vue ，柱状图只是将组件<ve-line>换成<ve-histogram>
<template><ve-lineref="chartObj":data="chartObj.chartData":settings="chartObj.chartSettings":title="{ text: chartConfig.title}":loading="chartObj.chartDataLoading":data-empty="chartObj.chartEmpty":mark-point="chartObj.chartMarkPoint":extend="chartObj.extend":height="chartConfig.height"/>
</template><script>
export default {props: {chartConfig: {type: Object,default: () => {return {};}}},data() {return {chartObj: {extend: {xAxis: {nameGap: 10},legend: {selectedMode: false},yAxis: {minInterval: 1,nameTextStyle: {align: 'left'}}},chartSettings: {dimension: this.chartConfig.dimension,metrics: this.chartConfig.metrics,labelMap: this.chartConfig.labelMap},chartData: {columns: [this.chartConfig.dimension, this.chartConfig.metrics],rows: []},chartMarkPoint: {data: [{ name: '最大值', type: 'max' }, { name: '最大值', type: 'min' }]},chartDataLoading: false,chartEmpty: false}};},watch: {chartConfig: {immediate: false,deep: true,handler() {this.initChart();}}},mounted() {this.initChart();},methods: {initChart() {this.chartObj.chartDataLoading = true;this.chartObj.chartEmpty = false;if (this.chartConfig.data) {this.chartObj.chartData.rows = this.chartConfig.data;this.chartObj.chartDataLoading = false;} else {this.chartObj.chartData.rows = [];this.chartObj.chartDataLoading = false;this.chartObj.chartEmpty = true;}}}
};
</script>

//饼图图组件，chartLine.vue ，环形图只是将组件<ve-pie>换成<ve-ring>
<template><ve-pieref="chartObj":data="chartObj.chartData":settings="chartObj.chartSettings":title="{ text: chartConfig.title }":extend="chartObj.extend":loading="chartObj.chartLoading":data-empty="chartObj.chartEmpty"/>
</template><script>
export default {props: {chartConfig: {type: Object,default: () => {return {};}}},data() {return {chartObj: {extend: {legend: {selectedMode: false}},chartSettings: {dimension: this.chartConfig.dimension,metrics: this.chartConfig.metrics,label: {formatter: '{b} {d}%'}},chartData: {columns: [this.chartConfig.dimension, this.chartConfig.metrics],rows: []},chartLoading: false,chartEmpty: false}};},watch: {chartConfig: {immediate: false,deep: true,handler() {this.initChart();}}},mounted() {this.initChart();},methods: {initChart() {this.chartObj.chartLoading = true;this.chartObj.chartEmpty = false;if (this.chartConfig.data) {this.chartObj.chartData.rows = this.chartConfig.data;this.chartObj.chartLoading = false;} else {this.chartObj.chartData.rows = [];this.chartObj.chartLoading = false;this.chartObj.chartEmpty = true;}}}
};
</script>

//页面代码
<template><div class="page">v-charts示例：<ChartLine :chart-config="lineConfig" /><ChartVeHistogram :chart-config="lineConfig" /><ChartPie :chart-config="pieConfig" /><ChartRing :chart-config="pieConfig" /></div>
</template><script>
import ChartLine from '@/components/charts/chartLine';
import ChartVeHistogram from '@/components/charts/chartVeHistogram';
import ChartPie from '@/components/charts/chartPie';
import ChartRing from '@/components/charts/chartRing';export default {components: {ChartLine,ChartVeHistogram,ChartPie,ChartRing},data() {return {lineConfig: {title: '折线图/柱状图',dimension: ['label'],metrics: ['value1', 'value2'],data: []},pieConfig: {title: '饼图',dimension: ['label'],metrics: ['value'],data: []}};},mounted() {this.lineConfig.data = [{ label: '1/1', value1: 1393, value2: 193 },{ label: '1/2', value1: 3530, value2: 230 },{ label: '1/3', value1: 2923, value2: 262 },{ label: '1/4', value1: 1723, value2: 423 },{ label: '1/5', value1: 3792, value2: 92 },{ label: '1/6', value1: 4593, value2: 293 }];this.pieConfig.data = [{ label: '1/1', value: 1393 },{ label: '1/2', value: 3530 },{ label: '1/3', value: 2923 },{ label: '1/4', value: 1723 },{ label: '1/5', value: 3792 },{ label: '1/6', value: 4593 }];},methods: {}
};
</script>
<style lang="scss" scoped>
</style>

v-charts组件化示例及动态传参相关推荐

android module中获取 app_Android组件化架构 - 4. 动态创建
Android 组件化中使用动态创建的作用是解耦: 1. 反射机制反射有两个作用:1.反编译:.class->.java;2.通过反射机制访问java对象中的属性,方法,构造器等: 实现反射, ...
vue 中的动态传参和query传参
Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 ...
Vue路由动态渲染和动态传参
一.动态渲染路由 // router/routerjs{ path: '/movie/1', component: Movie}, //app组件<router-link to="/m ...
jeecg-boot中popup实现动态传参
jeecg-boot中popup实现动态传参环境: 功能实现: 后话: 环境: 最近任务是基于jeecg-boot框架的,用的是jeecg-boot V2.4.0版. 功能实现: 有表"p ...
函数动态传参详细，作用域和名称空间，global和nonlocal
1. 动态传参(重点) *, ** *, ** : 形参: 聚合位置参数* -> 元组关键字** -> 字典实参: 打散列表, 字符串, 元素 -> * 字典 -> * ...
在Java中动态传参调用Python脚本
最近,又接触到一个奇葩的接口,基于老板不断催促赶时间的情况下,在重写java接口和复用已有的python脚本的两条路中选择了后者,但是其实后者并没有好很多,因为我是一个对python的认识仅限于其名称 ...
python调用shell脚本的参数_使用python执行shell脚本并动态传参及subprocess的使用详解
最近工作需求中有遇到这个情况在web端获取配置文件内容及往shell 脚本中动态传入参数执行shell脚本这个有多种方法最后还是选择了subprocess这个python标准库 subpr ...
v-for 循环 @click 动态传参（参数动态）
v-for 循环 @click 动态传参(参数动态) 代码示下: @click="function('id_'+data.id)" 以上就是关于"v-for 循环 @cl ...
sql 不为空_sql动态传参在springData中的应用（补充）
在之前的文章提到过关于sql动态传参在springData中的应用,下面补充一下关于原生sql和springData的同一需求下的两种不同的写法: 需求:contoller层传递一个map给servi ...
中给函数赋读权限_sql动态传参在springData中的应用（补充）
在之前的文章提到过关于sql动态传参在springData中的应用,下面补充一下关于原生sql和springData的同一需求下的两种不同的写法: 需求:contoller层传递一个map给servi ...

v-charts组件化示例及动态传参

v-charts组件化示例及动态传参相关推荐

最新文章

热门文章