<!-- tsx 简单图表组件 -->
<template>
<div class="chart"
:style="{height:height,width:width}"
:id="id">
</div>
</template>
<script >
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
require("echarts/lib/component/legend")
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
props: {
id: { // 主键id
type: String,
default: ''
},
title: {
type: Object,
default: () => {
return {
show: false, // 是否显示标题组件。
text: '', // 主标题文本，支持使用 \n 换行。
link: '', // 主标题文本超链接
textStyl: {}, // 标题样式
subtext: '', // 副标题
}
}
},
legend: {
type: Object,
default: () => {
return {
type: '', //'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
show: false, // 展示
left: "auto", // 图例组件离容器左侧的距离
top: 'auto', // 图例组件离容器上侧的距离。
right: "auto", // 图例组件离容器右侧的距离。
bottom: 'auto', // 图例组件离容器下侧的距离。
width: 'auto', // 图例组件的宽度。默认自适应。
height: 'auto', // 图例组件的高度
orient: 'horizontal', // 图例列表的布局朝向。'horizontal' 'vertical'
align: 'auto', // 图例标记和文本的对齐
}
}
},
xAxis: {
type: Object,
default: () => {
return {
show: true,
position: "", // 'top''bottom'
type: "", // 'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据'log' 对数轴。适用于对数数据。
name: "", // 坐标轴名称。
nameLocation: "", // 'start''middle' 或者 'center''end'
min: "", // 坐标轴刻度最小值。
max: "", // 坐标轴刻度最大值。
splitNumber: '', // 坐标轴的分割段数
boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
}
}
},
yAxis: {
type: Object,
default: () => {
return {
show: true,
position: "", // 'top''bottom'
type: "", // 'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据'log' 对数轴。适用于对数数据。
name: "", // 坐标轴名称。
nameLocation: "", // 'start''middle' 或者 'center''end'
min: "0", // 坐标轴刻度最小值。
max: "", // 坐标轴刻度最大值。
}
}
},
radar: { // 雷达图坐标系组件
type: Object,
},
dataZoom: { // 用于区域缩放
type: Object,
},
tooltip: { // 提示框组件。
type: Object,
default: () => {
return {
show: true,
trigger: '', // 'item'数据项图形触发 'axis' 坐标轴触发
}
}
},
dataset: { // 用于单独的数据集声明
type: Object,
default: () => {
return {
source: {},// 原始数据 建议看一下文档
}
}
},
series: { // 使用的图表
type: Object | Array,
default: () => {
return [{
type: '',// line折线图`bar柱状图`pie饼图`scatter散点`radar雷达图
name: "", //系列名称
stack: "", // 叠柱名称要相同
data: []
}]
}
},
width: {
type: String,
default: '800px'
},
height: {
type: String,
default: '350px'
},
},
data () {
// 这里存放数据
return {
}
},
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {
series: {
deep: true,
handler (val) {
console.log('图表监控')
this.initialization()
}
}
},
// 方法集合
methods: {
initialization () {
let Chart = this.$echarts.init(document.getElementById(this.id));
let echarts = {
title: this.title,
tooltip: this.tooltip,
legend: this.legend,
series: this.series,
yAxis: !this.radar ? this.yAxis : [{ show: false }],
xAxis: !this.radar ? this.xAxis : [{ show: false }],
radar: this.radar
}
Chart.setOption(echarts)
}
},
// 生命周期 - 创建完成（可以访问当前this实例）
created () {
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
this.initialization()
},
beforeCreate () { }, // 生命周期 - 创建之前
beforeMount () { }, // 生命周期 - 挂载之前
beforeUpdate () { }, // 生命周期 - 更新之前
updated () { }, // 生命周期 - 更新之后
beforeDestroy () { }, // 生命周期 - 销毁之前
destroyed () { }, // 生命周期 - 销毁完成
ctivated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
</style>
