技術標籤：echartsvue資料視覺化

1. 直接引入echarts

npm install echarts –save

2. 全域性引入
   在 main.js 中全域性引入 echarts

//echarts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

3. 建立圖表

<template>
  <div id="echarts1" style="width: 600px;height:400px;"></div>
</template>
 


<script>
export default {
    name: "echarts1",
    data() {
        return {}
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
        // 基於準備好的dom，初始化echarts例項
            let myChart = this.$echarts.init(document.getElementById("echarts1"
 
));
            // 指定圖表的配置項和資料
            let option = {
                title: {
                text: "ECharts 入門示例"
                },
                tooltip: {},
                legend: {
                data: ["銷量"]
                },
                xAxis: {
                data:
 
 ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
                },
                yAxis: {},
                series: [
                {
                    name: "銷量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20]
                }
                ]
            };
            myChart.setOption(option);
        },
       
    }
}
</script>

<style>
</style>

執行專案後發現有報錯

修改引入方式為：

let echarts = require('echarts');
let myChart = echarts.init(document.getElementById("echarts1"));

問題解決