echarts is not defined

关于echarts is not defined
在vue中使用echarts的柱状图时遇到echarts is not defined 可能是因为路径的问题
解决办法：
1 把 color: new echarts.graphic.LinearGradient 改成 color: new this.echarts.graphic.LinearGradient
2 在当前项目的当前页面中引入 import echarts from "echarts"

附：
echarts 在vue3中的使用方法
1 npm install echarts -S
2 在mian.js中引入
2.1 import echarts from "echarts"
2.2 Vue.use(echarts)
2.3 Vue.prototype.$echarts = echarts

完整代码示例：

<template>  <div class="box">    <div class="header">      <div class="dataCollection">数据补录</div>      <div class="dataSite">数据补录</div>      <div class="dataTable">数据补录</div>      <div class="dataUpdata">数据补录</div>    </div>    <div class="conent">      <div class="right"></div>      <div class="left">        <div id="myChart" :style="{width: '400px', height: '400px'}"></div>      </div>    </div>    <div class="footer">      <div id="lineChart" :style="{width: '100%', height: '100%'}"></div>    </div>  </div></template>
  <script>import echarts from "echarts"export default {  name: "hello",  data() {    return {      msg: "Welcome to Your Vue.js App",          };  },  mounted() {    this.drawLine();    this.lineCharts();  },  methods: {    drawLine() {      // 基于准备好的dom，初始化echarts实例      let myChart = this.$echarts.init(document.getElementById("myChart"));      // 绘制图表      myChart.      setOption({        title: {          text: "南宁(234567)更新于.......",          left: "center",        },        series: [          {            name: "访问来源",            type: "pie",            radius: "55%",            center: ["50%", "60%"],            data: [              { value: 335, name: "直接访问" },              { value: 310, name: "邮件营销" },              { value: 234, name: "联盟广告" },              { value: 135, name: "视频广告" },              { value: 1548, name: "搜索引擎" },            ],            emphasis: {              itemStyle: {                shadowBlur: 10,                shadowOffsetX: 0,                shadowColor: "rgba(0, 0, 0, 0.5)",              },            },          },        ],      });    },   lineCharts() {    var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];    var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];    var yMax = 500;    var dataShadow = [];    for (var i = 0; i < data.length; i++) {        dataShadow.push(yMax);    }    let lineChart = this.$echarts.init(document.getElementById("lineChart"));      // 绘制图表     lineChart.      setOption({       title: {        text: '特性示例：渐变色 阴影 点击缩放',        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'    },    xAxis: {        data: dataAxis,        axisLabel: {            inside: true,            textStyle: {                color: '#fff'            }        },        axisTick: {            show: false        },        axisLine: {            show: false        },        z: 10    },    yAxis: {        axisLine: {            show: false        },        axisTick: {            show: false        },        axisLabel: {            textStyle: {                color: '#999'            }        }    },    dataZoom: [        {            type: 'inside'        }    ],    series: [        { // For shadow            type: 'bar',            itemStyle: {                color: 'rgba(0,0,0,0.05)'            },            barGap: '-100%',            barCategoryGap: '40%',            data: dataShadow,            animation: false        },        {            type: 'bar',            itemStyle: {                color: new echarts.graphic.LinearGradient(                    0, 0, 0, 1,                    [                        {offset: 0, color: '#83bff6'},                        {offset: 0.5, color: '#188df0'},                        {offset: 1, color: '#188df0'}                    ]                )            },            emphasis: {                itemStyle: {                    color: new echarts.graphic.LinearGradient(                        0, 0, 0, 1,                        [                            {offset: 0, color: '#2378f7'},                            {offset: 0.7, color: '#2378f7'},                            {offset: 1, color: '#83bff6'}                        ]                    )                }            },            data: data        }    ]            });    },},
};</script>
<style lang="scss" scoped>.box {  display: flex;  flex-direction: column;  .header {    height: 20%;    border: 1px solid red;    display: flex;    .dataCollection {      height: 100px;      width: 120px;      background-color: rgb(51, 255, 0);    }    .dataSite {      height: 100px;      width: 400px;      background-color: rgb(105, 105, 56);    }    .dataTable {      height: 100px;      width: 400px;      background-color: rgb(92, 92, 66);    }    .dataUpdata {      height: 100px;      width: 400px;      background-color: rgb(236, 236, 215);    }  }  .conent {    height: 520px;    border: 1px solid black;    display: flex;    .right {      flex-grow: 15;      border: 1px solid black;    }    .left {      flex-grow: 1;      border: 1px solid black;      display: flex;      justify-content: center;    }  }  .footer {    height: 170px;    border: 1px solid rgb(4, 19, 228);  }}</style>