vue-echart组件(支持echartOption导入)
时间:2020-04-15
本文章向大家介绍vue-echart组件(支持echartOption导入),主要包括vue-echart组件(支持echartOption导入)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上一家公司的时候,有个页面,有很多的echart。echart
图形的形状不一,需要很多的option
对象。当时我是搞了很多行的配置代码,其实可以从配置抽离公共的部分写在组件内部,不同的写在父组件那里,这样子就可以节省代码。那时离职了,没有时间做这个事情。心里一直记得这个事,刚好最近有空,就完成这个功能。
代码如下。
<template>
<div :id="id" :style="style"></div>
</template>
<script>
import echarts from "echarts"
//如果有很多配置就使用map 映射吧
export default {
name: 'charts',
data () {
return {
chart: '',
//百度echart配置,难点是合并组件内部,父组件,和后台三方的数据,不过已经做到。
echartOption: this.propObj.option,
}
},
props: {
propObj: {
type: Object,
default(){
return {
//这里子组件需要接收父组件传递过来的参数
id: '',
width: '100%',
height: '100%',
option: {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
}
},
computed: {
style() {
return {
width: this.propObj.width,
height: this.propObj.height
}
}
},
watch: {
'propObj.option': {
handler(newVal, oldVal) {
this.echartOption = this.assignObj(oldVal,newVal)
this.change();
},
deep: true
}
},
mounted() {
this.init();
this.fetchChart();
},
methods: {
//获取后台数据
fetchChart() {
let that = this;
let chartType = this._props.chart;
let yTitle = that.chartYAxisList[chartType];
$.get('/api/rpt/chartData', {chartType: this.chartTypeIdList[chartType], dataType: this.dataType}, function (result) {
if (result.code === 0) {
that.chartX = result.obj.xAxis;
that.xTitle = result.obj.xtitle;
that.chartData = result.obj.data;
let colors = '#' + Math.floor(Math.random() * 16777215).toString(16);
//合并最新配置
that.echartOption = that.assignObj(that.echartOption,{
xAxis: [{
name: that.xTitle,
data: that.chartX
}],
yAxis: [{
name: yTitle,
}],
series: [{
data: that.chartData,
lineStyle: {
normal: {
color:colors
}
},
itemStyle: {
normal: {
color: colors
}
}
}]
})
that.change();
}
})
},
//百度echart变化
change(){
if (this.chart) {
this.chart.setOption(this.echartOption)
} else {
this.init();
}
},
//百度echart初始化
init() {
this.chart = this.$echarts.init(document.getElementById(this.propObj.id))
this.chart.showLoading(); //开启加载动画
this.chart.setOption(this.echartOption)
this.chart.hideLoading(); //关闭加载动画
window.addEventListener("resize", this.chart.resize());
},
//合并option的值、这份代码很关键
assignObj(vm, firstSource) {
const callee = arguments.callee //将运行函数赋值给一个变量备用
for(let [index,item] of new Map([...arguments].map((item,i) => [i,item]))){
if(index === 0) continue; //躲开vm
let nextSource = [...arguments][index];
if (nextSource && typeof nextSource !== "object") continue;
Object.keys(vm).reduce((pre,cur) => { //如果想使用宽松模式,就把这一行的vm改为nextSource
if(Object.prototype.toString.call(vm[cur]) !== '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
vm[cur] = nextSource[cur]
else if(Object.prototype.toString.call(vm[cur]) === '[object Object]' && vm.hasOwnProperty(cur) && nextSource.hasOwnProperty(cur))
callee(vm[cur],nextSource[cur]);
return vm;
},vm)
}
return vm
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
原文地址:https://www.cnblogs.com/StephenWu5/p/12707115.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 轻松掌握Git开发(三)版本的切换
- 轻松掌握Git开发(四)分支操作
- 一文搞定pandas的透视表
- Spring 日志输出错误字符 -e[0;39m e[2m[
- linux不支持所有命令的解决办法
- linux系列之常用运维命令整理笔录(小结)
- 轻松掌握Git开发(五)远程库的基本操作
- GitHub竟然还有这些骚操作,赶紧学起来
- leetcode之单词规律
- 内存溢出及解决方案
- 3分钟短文:Laravel控制器用法光速入门
- Linux查看ip的实例方法
- Ubuntu18.04通过源码安装Odoo14的教程
- Linux系统中SSH服务基于key认证实践的过程
- linux防墙iptables详细介绍、配置方法与案例