v2 echarts5 组件

<!-- 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>
上一篇:4星|《区块链项目开发指南》:代码级别的介绍,一些细节说的比较清楚


下一篇:数据结构——图的邻接矩阵基本操作