Vue中封装的echarts组件

系统管理员 2022-10-19 04:08 272阅读 0赞

先上效果图

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 3

最近做的项目中图表用到很多，所以简单记录下，目录结构很简单

20210709093403281.png

这里的resize.js是大佬写的一个监听窗口缩放的的事件，index.js是全局注册的 v-resize 自定义指令，在每个组件中都使用到了。

resize.js

  1. // 按钮权限判断指令
  2. const resize = {
  3.   inserted: (el, binding, vNode) => {
  4.     // 指令的绑定值，是一个function函数
  5.     const callback = binding.value
  6.     // 延时执行函数的毫秒数
  7.     const debounce = binding.arg || 200
  9.     // 禁止执行与事件关联的默认动作
  10.     const options = binding.modifiers || { passive: true }
  12.     let debounceTimeout = null
  13.     const onResize = () => {
  14.       clearTimeout(debounceTimeout)
  15.       debounceTimeout = setTimeout(callback, debounce, options)
  16.     }
  17.     // 监听窗口缩放
  18.     window.addEventListener('customResize', onResize, options)
  19.     window.addEventListener('resize', onResize, options)
  20.     // 存储监听窗口缩放事件的参数，方便在unbind钩子函数中解除事件绑定的时候使用到
  21.     el._onResize = {
  22.       onResize,
  23.       options
  24.     }
  25.   },
  26.   unbind (el, binding) {
  27.     const { onResize, options } = el._onResize;
  28.     window.removeEventListener('customResize', onResize, options)
  29.     window.removeEventListener('resize', onResize, options)
  30.     delete el._onResize
  31.   }
  32. };
  33. export default resize;

index.js

  1. import resize from './resize';
  2. const importDirective = Vue => {
  3.   /**
  4.    * 容器大小变化回调 v-resize='function'
  5.    * code 按钮编号
  6.    */
  7.   Vue.directive('resize', resize);
  8. };
  10. export default importDirective;

main.js很简单，主要是将importDirective 运用在了全局

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import importDirective from "./directive";
  6. Vue.use(importDirective)
  7. Vue.config.productionTip = false
  9. new Vue({
  10.   render: h => h(App),
  11. }).$mount('#app')

App.vue

  1. <template>
  2.     <div id="app">
  3.         <div class="chart_content">
  4.             <div>横向柱状图</div>
  5.             <chartOne :data="data_val" :yAxis="yAxis"></chartOne>
  6.         </div>
  7.         <div class="chart_content">
  8.             <div>饼状图</div>
  9.             <chartTwo :data="chart_two_data"></chartTwo>
  10.         </div>
  11.         <div class="chart_content">
  12.             <div>环形图</div>
  13.             <chartThree :data="chart_two_data"></chartThree>
  14.         </div>
  15.         <div class="chart_content">
  16.             <div>折线图</div>
  17.             <chartFour :legendone="four_legend_data_one" :legendtwo="four_legend_data_two" :xAxis="four_xAxis_data" :series="four_series_data"></chartFour>
  18.         </div>
  19.     </div>
  20. </template>
  22. <script>
  23.     import chartOne from './components/chart/chart_one.vue'
  24.     import chartTwo from './components/chart/chart_two.vue'
  25.     import chartThree from './components/chart/chart_three.vue'
  26.     import chartFour from './components/chart/chart_four.vue'
  28.     export default {
  29.         name: 'app',
  30.         components: {
  31.             chartOne,
  32.             chartTwo,
  33.             chartThree,
  34.             chartFour
  35.         },
  36.         data() {
  37.             return {
  38.                 data_val:[1,2,3,40],
  39.                 yAxis:['111','222','333','444'],
  40.                 chart_two_data: [{
  41.                         value: 1048,
  42.                         name: '火影'
  43.                     },
  44.                     {
  45.                         value: 735,
  46.                         name: '海贼'
  47.                     },
  48.                     {
  49.                         value: 580,
  50.                         name: '死神'
  51.                     },
  52.                     {
  53.                         value: 484,
  54.                         name: '龙珠'
  55.                     },
  56.                     {
  57.                         value: 300,
  58.                         name: '幽游白书'
  59.                     },
  60.                     {
  61.                         value: 300,
  62.                         name: '猫和老鼠'
  63.                     }
  64.                 ],
  65. four_legend_data_one: ['火影', '海贼', '死神', '龙珠', '葫芦娃'],
  66.                 four_legend_data_two: ['火影-新版', '海贼-新版', '死神-新版', '龙珠-新版', '葫芦娃-新版'],
  67.                 four_xAxis_data: ['2020/0/01', '2020/0/02', '2020/0/03', '2020/0/04', '2020/0/05', '2020/0/06',
  68.                     '2020/0/07'
  69.                 ],
  70. four_series_data: [{
  71.                         name: '火影',
  72.                         type: 'line',
  73.                         stack: '工单总量',
  74.                         data: [120, 132, 101, 134, 90, 230, 210]
  75.                     },
  76.                     {
  77.                         name: '海贼',
  78.                         type: 'line',
  79.                         stack: '工单总量',
  80.                         data: [120, 132, 101, 134, 90, 230, 210]
  81.                     },
  82.                     {
  83.                         name: '死神',
  84.                         type: 'line',
  85.                         stack: '工单总量',
  86.                         data: [120, 132, 101, 134, 90, 230, 210]
  87.                     },
  88.                     {
  89.                         name: '龙珠',
  90.                         type: 'line',
  91.                         stack: '工单总量',
  92.                         data: [120, 132, 101, 134, 90, 230, 210]
  93.                     },
  94.                     {
  95.                         name: '葫芦娃',
  96.                         type: 'line',
  97.                         stack: '工单总量',
  98.                         data: [120, 132, 101, 134, 90, 230, 210]
  99.                     },
  100.                     {
  101.                         name: '火影-新版',
  102.                         type: 'line',
  103.                         stack: '工单总量',
  104.                         data: [120, 132, 101, 134, 90, 230, 210]
  105.                     },
  106.                     {
  107.                         name: '海贼-新版',
  108.                         type: 'line',
  109.                         stack: '工单总量',
  110.                         data: [120, 132, 101, 134, 90, 230, 210]
  111.                     },
  112.                     {
  113.                         name: '死神-新版',
  114.                         type: 'line',
  115.                         stack: '工单总量',
  116.                         data: [120, 132, 101, 134, 90, 230, 210]
  117.                     },
  118.                     {
  119.                         name: '龙珠-新版',
  120.                         type: 'line',
  121.                         stack: '工单总量',
  122.                         data: [120, 132, 101, 134, 90, 230, 210]
  123.                     },
  124.                     {
  125.                         name: '葫芦娃-新版',
  126.                         type: 'line',
  127.                         stack: '工单总量',
  128.                         data: [120, 132, 101, 134, 90, 230, 210]
  129.                     }
  130.                 ],
  131.             }
  132.         },
  133.         computed: {
  135.         },
  136.     }
  137. </script>
  139. <style>
  140.     #app {
  141.         display: flex;
  142.         flex-wrap: wrap;
  143.     }
  145.     .chart_content {
  146.         border: 1px solid #ededed;
  147.         width: calc((100% - 20px)/2);
  148.         height: 400px;
  149.         margin-bottom: 10px;
  150.     }
  152.     .chart_content:nth-child(odd) {
  153.         margin-right: 10px;
  154.     }
  155. </style>

横向柱状图 chartOne 组件

  1. <template>
  2.   <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
  3. </template>
  4. <script>
  5. import * as echarts from "echarts";
  6. export default {
  7.   name: "barChart",
  8.   props: {
  9.     data: {
  10.       type: Array,
  11.       default() {
  12.         return [];
  13.       },
  14.     },
  15.     yAxis: {
  16.       type: Array,
  17.       default() {
  18.         return [];
  19.       },
  20.     },
  21.   },
  22.   data() {
  23.     return {
  24.       charts: null,
  25.     };
  26.   },
  27.   computed: {},
  28.   methods: {
  29.     resizeCharts() {
  30.       this.charts.resize();
  31.     },
  32.     initCharts() {
  33.       this.$nextTick(() => {
  34.         this.charts = echarts.init(this.$refs.barChart);
  35.         this.charts.clear();
  36.         this.setOption();
  37.       });
  38.     },
  39.     setOption() {
  40.       const option = this.getOption();
  41.       this.charts.setOption(option, true);
  42.     },
  43.     getOption() {
  44.       const option = {
  45.         grid: {
  46.           top: 0,
  47.           bottom: 0,
  48.           left: "35%",
  49.           right: "12%",
  50.         },
  51.         color: "#23E36D",
  52.         yAxis: {
  53.           type: "category",
  54.           axisTick: {
  55.             show: false,
  56.           },
  57.           splitLine: {
  58.             show: false,
  59.           },
  60.           axisLabel: {
  61.             interval: 0,
  62.             color: "#b4d7fa",
  63.           },
  64.           axisLine: {
  65.             show: false,
  66.           },
  67.           data: this.yAxis,
  68.         },
  69.         xAxis: {
  70.           type: "value",
  71.           axisTick: {
  72.             show: false,
  73.           },
  74.           splitLine: {
  75.             show: false,
  76.           },
  77.           axisLabel: {
  78.             show: false,
  79.           },
  80.           axisLine: {
  81.             show: false,
  82.           },
  83.         },
  84.         series: [
  85.           {
  86.             data: this.data,
  87.             type: "bar",
  88.             itemStyle: {
  89.               barBorderRadius: [0, 6, 6, 0],
  90.             },
  91.             emphasis: {
  92.               itemStyle: {
  93.                 opacity: 0.85
  94.               }
  95.             },
  96.             barWidth: 12,
  97.             label: {
  98.               show: true,
  99.               position: "right",
  100.               color: "red",
  101.             },
  102.           },
  103.         ],
  104.       };
  105.       return option;
  106.     },
  107.   },
  108.   mounted() {
  109.     this.initCharts();
  110.   },
  111.   beforeDestroy() {
  112.     this.charts && this.charts.dispose();
  113.     this.charts = null;
  114.   },
  115.   watch: {
  116.     data: {
  117.       handler() {
  118.         this.setOption();
  119.       },
  120.     },
  121.     yAxis: {
  122.       handler() {
  123.         this.setOption();
  124.       },
  125.     },
  126.   },
  127.   components: {},
  128. };
  129. </script>
  131. <style scoped>
  132. .chart {
  133.   width: 100%;
  134.   height: 100%;
  135. }
  136. </style>

饼状图 chartTwo 组件

  1. <template>
  2.     <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
  3. </template>
  4. <script>
  5.     import * as echarts from "echarts";
  6.     export default {
  7.         name: "barChart",
  8.         props: {
  9.             data: {
  10.                 type: Array,
  11.                 default () {
  12.                     return [];
  13.                 },
  14.             }
  15.         },
  16.         data() {
  17.             return {
  18.                 charts: null,
  19.             };
  20.         },
  21.         computed: {},
  22.         methods: {
  23.             resizeCharts() {
  24.                 this.charts.resize();
  25.             },
  26.             initCharts() {
  27.                 this.$nextTick(() => {
  28.                     this.charts = echarts.init(this.$refs.barChart);
  29.                     this.charts.clear();
  30.                     this.setOption();
  31.                 });
  32.             },
  33.             setOption() {
  34.                 const option = this.getOption();
  35.                 this.charts.setOption(option, true);
  36.             },
  37.             getOption() {
  38.                 const option = {
  39.                     tooltip: {
  40.                         trigger: 'item'
  41.                     },
  42.                     legend: {
  43.                         orient: 'vertical',
  44.                         left: '10',
  45.                         top: '150',
  46.                     },
  47.                     series: [{
  48.                         name: '访问来源66',
  49.                         type: 'pie',
  50.                         radius: '90%',//圆环的大小
  51.                         center: ['50%', '50%'],//圆环的位置
  52.                         data: this.data,
  53.                         emphasis: {
  54.                             itemStyle: {
  55.                                 shadowBlur: 10,
  56.                                 shadowOffsetX: 0,
  57.                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
  58.                             }
  59.                         },
  60.                         label: { //去除饼图的指示折线label
  61.                             normal: {
  62.                                 show: false
  63.                             }
  64.                         },
  65.                     }]
  66.                 };
  67.                 return option;
  68.             },
  69.         },
  70.         mounted() {
  71.             this.initCharts();
  72.         },
  73.         beforeDestroy() {
  74.             this.charts && this.charts.dispose();
  75.             this.charts = null;
  76.         },
  77.         watch: {
  78.             data: {
  79.                 handler() {
  80.                     this.setOption();
  81.                 },
  82.             },
  83.         },
  84.         components: {},
  85.     };
  86. </script>
  88. <style scoped>
  89.     .chart {
  90.         width: 100%;
  91.         height: 100%;
  92.     }
  93. </style>

环形图 chartThree 组件

  1. <template>
  2.     <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
  3. </template>
  4. <script>
  5.     import * as echarts from "echarts";
  6.     export default {
  7.         name: "barChart",
  8.         props: {
  9.             data: {
  10.                 type: Array,
  11.                 default () {
  12.                     return [];
  13.                 },
  14.             },
  15.             yAxis: {
  16.                 type: Array,
  17.                 default () {
  18.                     return [];
  19.                 },
  20.             },
  21.         },
  22.         data() {
  23.             return {
  24.                 charts: null,
  25.             };
  26.         },
  27.         computed: {},
  28.         methods: {
  29.             resizeCharts() {
  30.                 this.charts.resize();
  31.             },
  32.             initCharts() {
  33.                 this.$nextTick(() => {
  34.                     this.charts = echarts.init(this.$refs.barChart);
  35.                     this.charts.clear();
  36.                     this.setOption();
  37.                 });
  38.             },
  39.             setOption() {
  40.                 const option = this.getOption();
  41.                 this.charts.setOption(option, true);
  42.             },
  43.             getOption() {
  44.                 const option = {
  45.                     tooltip: {
  46.                         trigger: 'item'
  47.                     },
  48.                     legend: {
  49.                         orient: 'vertical',
  50.                         left: '10',
  51.                         top: '150',
  52.                     },
  53.                     series: [{
  54.                         name: '访问来源',
  55.                         type: 'pie',
  56.                         radius: ['70%', '100%'],//圆环的大小
  57.                         center: ['50%', '50%'],//圆环的位置
  58.                         avoidLabelOverlap: false,
  59.                         label: {
  60.                             show: false,
  61.                             position: 'center'
  62.                         },
  63.                         emphasis: {
  64.                             label: {
  65.                                 show: true,
  66.                                 fontSize: '20',
  67.                                 fontWeight: 'bold'
  68.                             }
  69.                         },
  70.                         labelLine: {
  71.                             show: false
  72.                         },
  73.                         data: this.data
  74.                     }]
  75.                 };
  76.                 return option;
  77.             },
  78.         },
  79.         mounted() {
  80.             this.initCharts();
  81.         },
  82.         beforeDestroy() {
  83.             this.charts && this.charts.dispose();
  84.             this.charts = null;
  85.         },
  86.         watch: {
  87.             data: {
  88.                 handler() {
  89.                     this.setOption();
  90.                 },
  91.             },
  92.             yAxis: {
  93.                 handler() {
  94.                     this.setOption();
  95.                 },
  96.             },
  97.         },
  98.         components: {},
  99.     };
  100. </script>
  102. <style scoped>
  103.     .chart {
  104.         width: 100%;
  105.         height: 100%;
  106.     }
  107. </style>

折线图 chartFour 组件

  1. <template>
  2.     <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
  3. </template>
  4. <script>
  5.     import * as echarts from "echarts";
  6.     export default {
  7.         name: "barChart",
  8.         props: {
  9.             legendone: {
  10.                 type: Array,
  11.                 default () {
  12.                     return [];
  13.                 },
  14.             },
  15.             legendtwo: {
  16.                 type: Array,
  17.                 default () {
  18.                     return [];
  19.                 },
  20.             },
  21.             xAxis: {
  22.                 type: Array,
  23.                 default () {
  24.                     return [];
  25.                 },
  26.             },
  27.             series: {
  28.                 type: Array,
  29.                 default () {
  30.                     return [];
  31.                 },
  32.             },
  33.         },
  34.         data() {
  35.             return {
  36.                 charts: null,
  37.             };
  38.         },
  39.         mounted() {
  40.             console.log("999999999")
  41.             console.log("数据", this.legend)
  42.         },
  43.         computed: {},
  44.         methods: {
  45.             resizeCharts() {
  46.                 this.charts.resize();
  47.             },
  48.             initCharts() {
  49.                 this.$nextTick(() => {
  50.                     this.charts = echarts.init(this.$refs.barChart);
  51.                     this.charts.clear();
  52.                     this.setOption();
  53.                 });
  54.             },
  55.             setOption() {
  56.                 const option = this.getOption();
  57.                 this.charts.setOption(option, true);
  58.             },
  59.             getOption() {
  60.                 const option = {
  61.                     tooltip: {
  62.                         trigger: 'axis'
  63.                     },
  64.                     // legend: {
  65.                     //     data: this.legendone,
  66.                     //     align: 'left',
  67.                     //     orient: 'horizontal',
  68.                     //     left: 'center',
  69.                     //     bottom: '40',
  70.                     // },
  71.                     legend: [{
  72.                             data: this.legendone,
  73.                             icon: "roundRect",
  74.                             x: 'center',
  75.                             y: '0%'
  76.                         },
  77.                         {
  78.                             data: this.legendtwo,
  79.                             icon: "roundRect",
  80.                             x: 'center',
  81.                             y: '5%'
  82.                         },
  83.                     ],
  84.                     grid: {
  85.                         left: '3%',
  86.                         right: '4%',
  87.                         bottom: '20%',
  88.                         containLabel: true
  89.                     },
  90.                     toolbox: {
  91.                         feature: {
  92.                             saveAsImage: {}
  93.                         }
  94.                     },
  95.                     xAxis: {
  96.                         type: 'category',
  97.                         boundaryGap: false,
  98.                         data: this.xAxis
  99.                     },
  100.                     yAxis: {
  101.                         type: 'value'
  102.                     },
  103.                     series: this.series
  104.                 };
  105.                 return option;
  106.             },
  107.         },
  108.         mounted() {
  109.             this.initCharts();
  110.         },
  111.         beforeDestroy() {
  112.             this.charts && this.charts.dispose();
  113.             this.charts = null;
  114.         },
  115.         watch: {
  116.             legendone: {
  117.                 handler() {
  118.                     this.setOption();
  119.                 },
  120.             },
  121.             legendtwo: {
  122.                 handler() {
  123.                     this.setOption();
  124.                 },
  125.             },
  126.             xAxis: {
  127.                 handler() {
  128.                     this.setOption();
  129.                 },
  130.             },
  131.             series: {
  132.                 handler() {
  133.                     this.setOption();
  134.                 },
  135.             },
  136.         },
  137.         components: {},
  138.     };
  139. </script>
  141. <style scoped>
  142.     .chart {
  143.         width: 100%;
  144.         height: 100%;
  145.     }
  146. </style>

发表评论

表情：
评论列表 （有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读