vue-echarts介绍：https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md

注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个

安装vue-echarts

此版本为"vue-echarts": "^6.0.2"，"echarts": "^5.3.1"

npm i -S vue-echarts echarts

注意：Vue 2 下使用 vue-echarts，必须还要安装 @vue/composition-api ： 

npm i -D @vue/composition-api

main.js中全局注册组件

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('VueEcharts', ECharts)

 查看

基本使用

<template>
   <v-chart :option="option_column" style="height: 400px"></v-chart>
</template>

<script>
export default {
  data() {
    return {
      option_column: {
        title: { text: "Column Chart" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
};
</script>

通常需要加上以下属性，使图表更好看：

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: true },
            magicType: { type: ["line", "bar"] },
            saveAsImage: {},
          },
        },
        grid: {
          left: "2.8%",
          right: "0.5%",
          bottom: "6%",
        },

自适应屏幕

方式1：autoresize:true  【推荐】

该方式自适应需满足两个条件：

1. 加上autoresize属性。
2. 图表外层需要指定vw单位的宽度，如width：100vw;

<template>
    <div style="width:100vw">
      <v-chart autoresize :option="option_column" style="height: 400px"></v-chart>
    </div>
</template>

<script>
export default {
  data() {
    return {
      option_column: {
        title: { text: "Column Chart" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
};
</script>

<style  scoped lang="scss">
</style>

方式二：给window注册resize监听事件

<!--main-->
<template>
  <div>
    <v-chart
      ref="ref_echart1"
      :option="option_column"
      style="height: 400px"
    ></v-chart>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option_column: {
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    window.addEventListener("resize", () => this.$refs?.ref_echart1?.resize());
  },
  methods: {},
};
</script>

loading效果：

配置样式 

官网样式：https://echarts.apache.org/zh/download-theme.html

如：macarons、dark  、vintage、infographic、shine、roma

引入Echarts内置样式

 Echarts内置了很多样式，在使用时需手动导入指定的样式。

自定义主题样式：

配置主题地址：https://echarts.apache.org/zh/theme-builder.html

 注意这里下载json版本。js版本没有引入成功

<!--main-->
<template>
  <div style="width: 400px">
    <v-chart :theme="myEchartStyle" :option="option_column" style="height: 400px"></v-chart>
  </div>
</template>

<script>
import myEchartStyle from "@/assets/myEchartStyle.json";

export default {
  components: {},
  data() {
    return {
      myEchartStyle,
      option_column: {
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  },
  props: {},
  created() {},
  mounted() {},
  computed: {},
  methods: {}
};
</script>

<style lang="scss" scoped>
</style>

 给当前vue页面中的所有图表注册样式：

<!--main-->
<template>
  <div style="width: 400px">
    <v-chart :option="option_column" style="height: 400px"></v-chart>
    <v-chart :option="option_column" style="height: 400px"></v-chart>
  </div>
</template>
<script>
import myEchartStyle from "@/assets/myEchartStyle.json";
import { THEME_KEY } from "vue-echarts";
export default {
  components: {},
  provide: {
    [THEME_KEY]: myEchartStyle
  },
  data() {
    return {
      option_column: {
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  }
};
</script>