【vue 引入echarts】

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

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

安装vue-echarts

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('v-chart', 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> 

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

<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> 

<!--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> 

<!--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>