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>

echarts is not defined相关推荐

echarts is not defined解决方案
今日遇到这个错误,这时候我们对照官方文档我们的写法没有错误,一般第一次接触这个工具的人会在GitHub的相关项目下随便找一个echarts.js文件,这就是我们遇到这个问题的关键原因,因为在不同目录下 ...
Echart报错echarts is not defined
使用Echart时,引入Echart.js和自己写的js容易出现的错误: 首先,报错如下: 这是因为在引入时,顺序出现错误,应该先引入echart.js,然后在引入自己写的js.这样才不会出错.
echarts中国地图分七大区
接到这个需求我一开始以为特别简单,像这种需求,网上应该一搜一大把.开开心心说一下午就完事,结果狠狠打脸.不过最后还是弄出来了,因为有大佬相助,我就记录一下我解决的方法吧.很简单,用了大佬的文件.我贴一 ...
关于Echarts使用本地文件时出现的问题
官方的文件里面有毒,要去下载Echarts.min.js才有用. 报错类型: echarts is not defined ncaught SyntaxError: Cannot use import ...
Echarts 柱状图、饼状图等变换颜色、渐变色
Echarts 柱状图.饼状图等变换颜色.渐变色本文只总结了几种用到过的方法,当然,方法远不止这些.以下实测有效.之后如果遇到测试成功的方法,也会对文章进行更新.其中很多参数可以自行测试修改. 方法 ...
python可视化来分析全国疫情
很长一段时间在python下出图都是使用matplotlib,其好处就是应用比较广泛,文档很容易找,不过出的图微显丑陋.pyecharts 是百度的echarts基于python的实现,可以很方便的直 ...
Echart 画图表
前端可视化数据显示 Echart 为什么选择它,没选择蚂蚁金服的AntV 两个字方便特别是与前端的 js AntV 配置麻烦,我只需要工具快速开发图表而已与jsp关联 ...
Vue3+Cli4 中使用 Echarts 5
文章目录前言一.按需引入二.全局引入三.4小时血泪史 1.第一个困难 2.第二轮太阳总结前言最近在做这个项目,这也是驱使我探求Vue3和Echarts结合方法的原因,虽然还没做完,我挑一 ...
VUE+Cesium绘制迁徙图结合echarts实现
一.编写EchartsLayer类实现注入到window对象,实现类如下: import * as Cesium from 'cesium/Cesium' import * as echarts fr ...

echarts is not defined

echarts is not defined相关推荐

最新文章

热门文章