vue learning diary 10

Echart

I would first download and install

npm install echarts --save　

echarts official website 

https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

vue also packaged echarts, when generating chart using echarts, often tedious to do data type conversion, modifying complex configuration items appear v-charts of pain is to solve this point. Based on v-charts and chart component Vue2.0 echarts package, only need to provide a unified set of simple configuration items on the front and rear ends are friendly data format, you can easily generate a common chart.

v-charts official website

https://v-charts.js.org/#/

To echarts example:

<template>
  <div>
    <div ref="chartDom" style="height:300px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { addListener, removeListener } from "resize-detector";
import debounce from "loadsh/debounce";
export default {
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    option(val) {
      this.Chart.setOption(val);
    }
  },
  created() {
    this.resize = debounce(this.resize, 100);
  },
  mounted() {
    this.renderChart();
    addListener(this.$refs.chartDom, this.resize);
  },
  methods: {
    resize() {
      this.Chart.resize();
    },
    renderChart() {
      this.Chart = echarts.init(this.$refs.chartDom);
      this.Chart.setOption(this.option);
    }
  },
  beforeDestroy() {
    removeListener(this.$refs.chartDom, this.resize);
    this.Chart.dispose();
    this.Chart = null;
  }
};
</script>

<style></style>

Here is the value of the options I pass over from the parent component. Specific data are as follows

= Option { 
            title: { 
                text: 'ECharts start example' 
            }, 
            ToolTip: {}, 
            Legend: { 
                Data: [ 'sales' ] 
            }, 
            XAXIS: { 
                Data: [ "Shirt", "sweater", "Snow spinning shirt "," pants "," shoes "," socks " ] 
            }, 
            YAXIS: {}, 
            Series: [{ 
                name: 'sales' , 
                type: 'bar' , 
                Data: [ 10, 20 is, 30, 40, 50,60]
            }]
        };

resize-detector
 when we draw the image size when the DOM is changed, the size of the image is changed will not happen. Some will be out of range, or do not occupy the entire line, here we use the resize-detector, you can add an event to listen to our dom elements. When listening to dom size changes, call resize. 
Note that, charts here width can not be set to a fixed value, starting percentage, or resize fail. 
Of course, still need to download.

npm i --save resize-detector

The method used, there is the above code. Add a listener listens introduction and removal of two events. Do the appropriate action.

debounce

Image stabilization function, which is lodash library inside a good package of functions, lodash which also provides a number of ways.

When anti-shake is set here because of a change in the size dom, the listener will be more of a trigger.

lodash URL

https://www.lodashjs.com/

Finally renderings