echarts图表使用

1、介绍

        echarts中文官网：echarts

2、npm命令安装Echarts

•  在下载echarts时，很多人可能会遇到安装不成功或者报错的问题，解决办法可以通过重装或者是装之前的版本来解决。 

npm install echarts --save
npm install echarts@4.8.0 --save

3、vue项目中引用echarts

        局部引入，在所需要用的引入

import * as echarts from "echarts";

4、示例

        在你所需要的地方写入dom

        <div style="width:400px;height:300px" id="echarts">

        ！需注意的：这里一般最好用style来设置属性，类设置的可能会出现无效果

<template>
    <div class="box">
      <div id="echarts" :style="{width: '100%', height: '100%'}"></div>   
    </div>
</template>
<script setup>
import * as echarts from "echarts";
const myEcharts = echarts;
const standardStr=ref(["小明"])
const scoreAvgStr=ref(['50.00'])
const getLine=()=>{
    let chart = myEcharts.init(document.getElementById("echarts"));
    chart.setOption({
                    tooltip: {
                        trigger: "axis"
                    },
                    legend: {
                        orient: 'horizontal', // 'vertical'
                        x: 'right', // 'center' | 'left' | {number},
                        y: 0, // 'center' | 'bottom' | {number}
                        padding: 40,
                        data: ["平均成绩"]
                    },
                    calculable: false,
                    xAxis: [{
                        type: "category",
                        data: standardStr
                    }],
                    yAxis: [{
                        type: "value"
                    }],
                    series: [
                        {
                            name: "平均成绩",
                            type: "bar",
                            data: scoreAvgStr
                        }]
                });
     window.addEventListener("resize", () => {
            chart.resize();
        });
}
</script>
<style scoped>
.box{
    width: 300px;
    height: 300px;
    margin-left: 30px;
}
</style>