Package Echarts in the Vue project

This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Install the Echarts dependency

npm install echarts -S
Copy the code

First you need to import the global in main.js

Import echarts from 'echarts' Vue. Prototype. $echarts = echartsCopy the code

Encapsulate the Echarts

The echarts.vue file wraps the component

<template>
  <div :id="id"></div><! -- bind ID --> </template><script>
import Echarts from 'echarts'
export default {
  data() {
    return {
      myChart:}}, {},props: ['echartObj'.'id'].created() {
    this.$nextTick(() = > {
      this.loadEchart()
    })
  },
  mounted() {
    let _this = this
    window.onresize = function() {
      _this.myChart.resize()
    }
  },
  methods: {
    loadEchart() {
      this.myChart = Echarts.init(document.getElementById(this.id))  // Bind the Id name dynamically to solve the problem of only displaying one Echarts when multiple Echarts are passed
      this.myChart.setOption({
        // Add these attributes to the object you pass in
        legend: this.echartObj.legend,
        color: this.echartObj.color,
        series: this.echartObj.series,
        tooltip: this.echartObj.tooltip,
        grid: this.echartObj.grid,
        xAxis: this.echartObj.xAxis,
        yAxis: this.echartObj.yAxis,
        radar: this.echartObj.radar,
      })
    },
  },
}
</script>
Copy the code

Use encapsulated components

index.vue

<template>
  <div>
    <echarts
      v-for="(item, index) in arr"
      :key="index"
      :id="item.echartsId"
      :echartObj="item.echartObj"
      :style="{width: '100%', height: '300px'}"
    />
    <! -- id: id of the incoming component echartObj: Echarts display data of the incoming component -->
  </div>
</template>

<script>
export default {
  components: {
    echarts: () = > import("./Echarts") // Introduce components!! Make sure your own component path is in the current directory
  },
  data() {
    return {
      arr: [{// The Id passed to Echarts will be displayed in order to render all three at the same time
          echartsId: "myChart".// Echarts display data
          echartObj: {
            legend: {
              left: "center".top: "bottom"
            },
            color: ["#fe5c30"."#fe812d"."#ffce2c"."#01c5d2"."#4f71ef"].series: [{type: "pie".radius: [0.90].center: ["50%"."40%"].roseType: "area".data: [{value: 25.name: "Macau" },
                  { value: 15.name: "Hong Kong" },
                  { value: 20.name: "The mainland" },
                  { value: 25.name: "Taiwan" },
                  { value: 15.name: "Overseas"}].label: {
                  normal: {
                    formatter: ["{b|{b}}"."{d|{d}%}"].join("\n"),
                    rich: {
                      d: {
                        / / color: RGB (241246104),
                        fontSize: 15.fontWeight: "bold".lineHeight: 2
                      },
                      b: {
                        / / color: RGB (98137169),
                        fontSize: 13.height: 40}}}},labelLine: {
                  normal: {
                    lineStyle: {
                      color: "#ccc"
                    },
                    smooth: 0.length: 20.length2: 10}}}]}}, {echartsId: "myChart2".echartObj: {
            color: ["#3398DB"].tooltip: {
              trigger: "axis".axisPointer: {
                // Coordinate axis indicator, coordinate axis trigger valid
                type: "shadow" / / the default value is linear, optional: 'the line' | 'shadow'}},grid: {
              top: "8%".left: "3%".right: "4%".bottom: "3%".containLabel: true
            },
            xAxis: [{type: "category".data: ["Baby"."Children"."Children"."Young"."Youth"."Middle-aged"."Old age"].axisTick: {
                  alignWithLabel: true}}].yAxis: [{type: "value"}].series: [{type: "bar".barWidth: "40%".data: [10.52.10.54.60.100.180]}]}}, {echartsId: "myChart3".echartObj: {
            radar: {
              // shape: 'circle',
              indicator: [{name: "Junior".max: 6500
                },
                {
                  name: "Master".max: 16000
                },
                {
                  name: "博士".max: 30000
                },
                {
                  name: "Bachelor".max: 38000
                },
                {
                  name: "High school".max: 52000}},series: [{type: "radar".// areaStyle: {normal: {}},
                data: [{value: [4300.14000.28000.35000.50000.19000].name: "Allocated Budget."}].areaStyle: {
                  normal: {
                    color: "rgba(0, 100, 255,.7)" // Fill the color. [ default: "#000" ]}},lineStyle: {
                  // Single line style.
                  normal: {
                    opacity: 0.5.// Image transparency
                    color: "Rgba (0, 100, 255, 1)"}},itemStyle: {
                  // A single inflection flag style setting.
                  normal: {
                    borderColor: "rgba(0, 100, 255,.5)".// The stroke color of the inflection point. [ default: '#000' ]
                    borderWidth: 3 // The inflection point stroke width, default is not stroke. [ default: 0 ]}}}]}}]}; }};</script>
Copy the code

After the work needs to see their own subtle modification is good!