<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>