封装代码:
<!-- * @Descripttion:图表组件--> <template> <div class='YxkEcharts'> <VEcharts :params="echartsObj"></VEcharts> </div> </template> <script> // 图表 const VEcharts = { props: { params: { type: Object } }, render(createElement) { const createNode = params => { // 元素 let ele = `ve-${params.type || 'line'}` // 参数 let props = { attrs: { ...params } } if (!params.data.rows.length) { props.attrs['data-empty'] = true } // 子级 let childNodes = [] return createElement(ele, props, childNodes) } return createNode(this.params) }, } export default { name: 'YxkEcharts', componentName: 'YxkEcharts', props: { echartsObj: { type: Object, default: () => { return {} } } }, components: { VEcharts }, data() { return {} }, methods: {}, computed: {}, watch: {}, created() {}, mounted() {} } </script> <style lang='scss'> .YxkEcharts{ position: relative; background: #fff; padding: 20px; .v-charts-data-empty{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } } </style> // 插件 echarts v-charts
示例:
参数说明:
extend (setOption——https://echarts.apache.org/zh/option.html#title)
公有属性(指的是对所有类型图表都生效)查看 https://v-charts.js.org/#/props