（12）vue引用echarts

最新推荐文章于 2024-05-08 20:18:06 发布
最新推荐文章于 2024-05-08 20:18:06 发布
阅读量344 收藏
点赞数
分类专栏： VUE js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_t_y_y/article/details/105246960
版权

一、引用步骤：

1、先引入echarts库：

如果用的页面比较多，可以在main.js中全局引入echarts库；如果用的页面不多，可以单独引入。这里采用全局引入：

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css
import App from './App'
import router from './router'
import store from './store'
import '@/icons' // icon
import '@/permission' // permission control
import VueJsonp from 'vue-jsonp'
import echarts from 'echarts'
Vue.use(VueJsonp)

Vue.use(ElementUI, { locale })

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

2、具体图表引用：参数参考echarts官网https://echarts.apache.org/en/index.html

这里写了几个常用的统计图：

代码：

<template>
  <div class="container">
    <el-row gutter="5">
      <!--柱状图-->
      <el-col span="6">
        <el-card class="card">
          <div style="height:200px" ref="bar"></div>
        </el-card>
      </el-col>
      <!--折线图-->
      <el-col span="8">
        <el-card>
          <div style="height:200px;margin-left:0px" ref="line"></div>
        </el-card>
      </el-col>
      <!--饼图-->
      <el-col span="10">
        <el-card>
          <div style="height:200px;margin-left:0px" ref="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //柱状图
      barList: {
        title: { text: "柱状图" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      //折线图
      lineList: {
        title: { text: "折线图" },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      },
      //饼图
      pieList: {
        title: {
          text: "饼图",
          subtext: "虚构数据",
          left: "center"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          data: ["西凉", "益州", "兖州", "荆州", "幽州"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                value: 1548,
                name: "幽州",
                label: {
                  formatter: [
                    "{title|{b}}{abg|}",
                    "  {weatherHead|天气}{valueHead|天数}{rateHead|占比}",
                    "{hr|}",
                    "  {Sunny|}{value|202}{rate|55.3%}",
                    "  {Cloudy|}{value|142}{rate|38.9%}",
                    "  {Showers|}{value|21}{rate|5.8%}"
                  ].join("\n"),
                  backgroundColor: "#eee",
                  borderColor: "#777",
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: "#eee",
                      align: "center"
                    },
                    abg: {
                      backgroundColor: "#333",
                      width: "100%",
                      align: "right",
                      height: 25,
                      borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        //image: weatherIcons.Sunny
                      }
                    },
                    Cloudy: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        //image: weatherIcons.Cloudy
                      }
                    },
                    Showers: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        //image: weatherIcons.Showers
                      }
                    },
                    weatherHead: {
                      color: "#333",
                      height: 24,
                      align: "left"
                    },
                    hr: {
                      borderColor: "#777",
                      width: "100%",
                      borderWidth: 0.5,
                      height: 0
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "left"
                    },
                    valueHead: {
                      color: "#333",
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "center"
                    },
                    rate: {
                      width: 40,
                      align: "right",
                      padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                      color: "#333",
                      width: 40,
                      align: "center",
                      padding: [0, 10, 0, 0]
                    }
                  }
                }
              },
              { value: 535, name: "荆州" },
              { value: 510, name: "兖州" },
              { value: 634, name: "益州" },
              { value: 735, name: "西凉" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      //柱状图
      let bar = this.$echarts.init(this.$refs.bar);
      bar.setOption(this.barList);
      //折线图
      let line = this.$echarts.init(this.$refs.line);
      line.setOption(this.lineList);
      //饼图
      let pie = this.$echarts.init(this.$refs.pie);
      pie.setOption(this.pieList);
    }
  }
};
</script>
<style scoped>
.container {
  height: 100%;
  width: 100%;
  margin: 0 0;
}
.card {
  margin-left: 0px;
}
</style>

二、动态加载echarts图表数据常见问题：

1、注意如果是从后台获取数据渲染，需要写高度和宽度，否则图表可能不展示

<!-- @format -->

<template>
  <div class="container">
   <el-col>
                  <div ref="pie" class="pie-div" ></div>
                </el-col>
  </div>
</template>

<script>

export default {
  name: 'schoolProductOverviewInfo',
  props: {
   
    schoolProjectsList: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      pieChart: '',
      //饼图
      pieData: {
        graphic: [
          {
            //环形图中间添加文字
            type: 'text', //通过不同top值可以设置上下显示
            left: 'center',
            top: '45%',
            style: {
              text: '',
              textAlign: 'center',
              fill: 'black', //文字的颜色
              width: 30,
              height: 30,
              fontSize: 30,
              fontFamily: 'Microsoft YaHei'
            }
          }
        ],
        series: [
          {
            name: '项目饼图',
            type: 'pie',
            radius: ['55%', '100%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                position: 'inside',
                show: true, //控制显隐
                textStyle: {
                  color: '#F2F2F2',
                  fontSize: 10
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            color: [],
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.initProjectPieData();
  },
  mounted() {
    setTimeout(() => {
      this.initCharts();
    }, 500);
  },

  methods: {
 initCharts() {
      let pie = this.$echarts.init(this.$refs.pie);
      this.pieChart = pie;
      pie.setOption(this.pieData, true);
    },
    //计算数据
    initProjectPieData() {
      let pieDataList = [];
      let colorList = [];
      let color = '';
      let pieData = {};
      //0项目1,1项目2,2项目3,3项目4,4项目5
      for (var i = 0; i < 5; i++) {
        var projects = this.schoolProjectsList.filter(item => {
          return item.projectStatus === i + '';
        });
        let name = '';
        if (i === 0) {
          name = '项目1';
          color = '#C6D9F1';
        } else if (i === 1) {
          name = '项目2';
          color = '#558ED5';
        } else if (i === 2) {
          name = '项目3';
          color = '#F79646';
        } else if (i === 3) {
          name = '项目4';
          color = '#D3D3D3';
        } else if (i === 4) {
          name = '项目5';
          color = '#00bfbf';
        }
        if (projects.length > 0) {
          pieData = { value: projects.length, name: name + ' ' + projects.length };
          pieDataList.push(pieData);
          colorList.push(color);
        }
      }
      this.pieData.series[0].data = pieDataList;
      this.pieData.color = colorList;
      if (this.schoolProjectsList.length > 0) {
        this.pieData.graphic[0].style.text = this.schoolProjectsList.length;
      }
    }
  }
};
</script>

<style scoped lang="less">
.pie-div {
            height: 200px;
            width: 200px;
            margin: 0px;
          }
</style>

2、数据异步获取图表不渲染：动态加载，由于数据是从后台异步获取的，如果响应比较慢而echarts先初始化了可能会导致页面为空不渲染新数据，解决方法：

（1）方法一：在created钩子函数中获取数据，在mounted中延迟初始化echarts：如我这里延迟了500ms，差不多等数据已经响应了再初始化echarts

 mounted() {
    setTimeout(() => {
      this.initCharts();
    }, 500);
  },

（2）方法二：加入watch监听，监听option数据，注意一开始需要给option的data赋值（为[]），否则监听option不会监听data属性：

<!-- @format -->

<template>
    <div class="container">
        <el-row :gutter="20">
		  <!--类型饼图-->
          <el-col :span="4" :offset="1">
            <div ref="userTypePie" class="pie-div" ></div>
          </el-col>
		  <!--等级折线图饼图-->
          <el-col :span="8" :offset="1">
            <div ref="userLevel" class="level-div" ></div>
          </el-col>
		  <!--来源饼图-->
          <el-col :span="4" :offset="1">
            <div ref="userSourcePie" class="pie-div" ></div>
          </el-col>
        </el-row >
    </div>
</template>
<script>
export default {
  data() {
    return {
      userTypePie: '',
      userLevel: '',
      userSourcePie: '',
      userTypePieData: {
        title: {
          text: '用户类型',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}, {c}, {d}%'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            label: {
              normal: {
                position: 'inside',
                show: true,
                textStyle: {
                  color: '#F2F2F2',
                  fontSize: 10
                }
              }
            },
            data: [
              {
                value: 1548,
                name: '幽州'
              },
              { value: 535, name: '荆州' },
              { value: 510, name: '兖州' },
              { value: 634, name: '益州' },
              { value: 735, name: '西凉' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      userLevelData: {
        title: {
          text: '用户定级',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: [ 'A', 'B', 'C', 'D']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
            }
          }
        ]
      },
      userSourcePieData: {
        title: {
          text: '用户来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            label: {
              normal: {
                position: 'inside',
                show: true,
                textStyle: {
                  color: '#F2F2F2',
                  fontSize: 10
                }
              }
            },
            data: [
              {
                value: 1548,
                name: '幽州'
              },
              { value: 535, name: '荆州' },
              { value: 510, name: '兖州' },
              { value: 634, name: '益州' },
              { value: 735, name: '西凉' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  },
  created() {
    this.getBaseUserInfo();
  },
  mounted() {
    this.initCharts();
  },

  methods: {
    getBaseUserInfo() {
      this.$api['user/getUserInfo']({}).then(data => {
        let userLevelMap = data.userLevelMap;
        let userLevelData = [];
        userLevelData.push(userLevelMap['A'].length);
        userLevelData.push(userLevelMap['B'].length);
        userLevelData.push(userLevelMap['C'].length);
        userLevelData.push(userLevelMap['D'].length);
        this.userLevelData.series[0].data = userLevelData;
      });
    },
   
    initCharts() {
      //类型饼图
      this.userTypePie = this.$echarts.init(this.$refs.userTypePie);
      this.userTypePie.setOption(this.userTypePieData, true);
      //定级折线图
      this.userLevel = this.$echarts.init(this.$refs.userLevel);
      this.userLevel.setOption(this.userLevelData, true);
      //来源饼图
      this.userSourcePie = this.$echarts.init(this.$refs.userSourcePie);
      this.userSourcePie.setOption(this.userSourcePieData, true);
    }
  },
  watch: {
    userLevelData: {
      handler(newVal, oldVal) {
        if (this.userLevel) {
          if (newVal) {
            this.userLevel.setOption(newVal);
          } else {
            this.userLevel.setOption(oldVal);
          }
        } else {
		  //如果写了immediate: true,下面的代码需要去掉，因为vue初始化生命周期获取不到DOM
          // this.userLevel = this.$echarts.init(this.$refs.userLevel);
          // this.userLevel.setOption(this.userLevelData, true);
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  .level-div {
      height: 250px;
      width: 300px;
      margin: 0px;
    }
   .pie-div {
      height: 200px;
      width: 200px;
      margin: 0px;
    }
}
</style>

三、echarts图表宽度自适应问题：

1、上面说了，如果是从后台获取数据渲染，需要写高度和宽度，否则图表可能不展示。但是宽度写死了，浏览器窗口大小改变会使echarts图表显的很挤或者很空，解决方法：css设置高度，宽度写100%，浏览器窗口改变时，在windows.onresize中重置图表大小达到自适应。



<template>
    <div class="container">
        <el-row :gutter="20">
		  <!--类型饼图-->
          <el-col :span="4" :offset="1">
            <div ref="userTypePie" class="pie-div" ></div>
          </el-col>
		  <!--等级折线图饼图-->
          <el-col :span="8" :offset="1">
            <div ref="userLevel" class="level-div" ></div>
          </el-col>
		  <!--来源饼图-->
          <el-col :span="4" :offset="1">
            <div ref="userSourcePie" class="pie-div" ></div>
          </el-col>
        </el-row >
    </div>
</template>

<script>
  ......
  mounted() {
    //类型饼图
      this.userTypePie = this.$echarts.init(this.$refs.userTypePie);
      this.userTypePie.setOption(this.userTypePieData, true);
      //定级折线图
      this.userLevel = this.$echarts.init(this.$refs.userLevel);
      this.userLevel.setOption(this.userLevelData, true);
      //来源饼图
      this.userSourcePie = this.$echarts.init(this.$refs.userSourcePie);
      this.userSourcePie.setOption(this.userSourcePieData, true);
      //宽度自适应
       window.onresize = () => {
         this.userTypePie.resize();
         this.userLevel .resize();
         this.userSourcePie .resize();
      };

  },
</script>


<style lang="less" scoped>
.container {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  .pie-div {
        height: 250px;
        width: 100%;
        margin: 0px;
      }
      .level-div {
        height: 250px;
        width: 100%;
        margin: 0px;
      }
}
</style>

2、一个页面有多个图表，resize()方法只生效一个，解决方法：在使用window.onresize监听窗口变化时，要使用DOM二级绑定方式：addEventListener方式。将window.onresize改为window.addEventListener，如：

window.addEventListener("resize",()=>{
     brokenLine.resize();
 });

3、图表宽度设置为100%，实际渲染为100px问题，解决方法：

<div class="container" id="container" ref="container">
    <div ref="gaugeChart" class="gauge-div" id="gaugeChart"></div>
  </div>



 

mounted() {
    this.initCharts();
  },
 methods: {
    resizeGaugeWidth() {
      //宽度
      // let outWidth = document.getElementById('container').clientWidth;
      let outWidth = this.$refs.container.clientWidth;
      console.info('宽度:' + outWidth);
      this.$refs.gaugeChart.style.width = outWidth + 'px';
    },
    initCharts() {
      this.resizeGaugeWidth();
      this.gaugeChart = this.$echarts.init(this.$refs.gaugeChart);
      this.gaugeChart.setOption(this.gaugeOption, true);
      //宽度自适应
      window.addEventListener('resize', () => {
        this.resizeGaugeWidth();
        this.gaugeChart.resize();
      });
    }
  }




.container {
  .gauge-div {
    height: 150px;
    width: 100%;
    margin: 0px;
    display: inline;
  }
}

强制赋值宽度：

 

w_t_y_y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue使用echarts
Senora的博客
12-01 3540
在vue中使用echarts 1.先创建一个vue项目 2.在项目路径下执行以下命令 3.在main.js文件中引入echarts 4.在页面中使用
如何在Vue和React中优雅的使用ECharts
qq_42002487的博客
08-27 701
前言 俗话说：“工欲善其事，必先利其器”。现如今已经有许多成熟易用的可视化解决方案，例如ECharts，AntV等等。我们可以把这些解决方案比作是一套套成熟的“工具”，那我们如何将这些“工具”应用于当前最热门的两个前端框架中呢？ 不慌，现在我们就以ECharts为例，来尝试“工具”的各种用法。 Vue中运用ECharts 首先我们要把ECharts下载下来： npm install echarts --save 全局引用 全局引用的好处就是我们一次性把ECharts引入项目后，就可以在任何一个组件中使用E
Vue项目中使用echarts教程
最新发布
qq_20236937的博客
05-08 2819
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。
vue3中使用echart的两种引入方式，以及需要注意的事项。
烟溪彭于晏的博客
07-13 8693
创建好vue3项目后安装echarts终端输入：安装好后：app.vue (provide 和 inject的使用)在需要用echarts的组件中用inject获取拿挂网的入门例子来说。（vue3 版本）开始我是这么写的，开起来好像没有问题。但是你一打开页面就会发现数据没有渲染上去。因为此时vue还没有挂载到dom元素上去，所以获取不到dom元素，数据当然不能渲染。需要这么写，把获取dom元素和初始化myecharts的动作放到onMounted(()=>{})中vue3：你可以通过在生命周期钩子前面加上
【Echarts】echarts多层圆环图详细配置代码
做笔记/记录遇到的前端bug
10-09 3497
vue项目使用echars圆环图，多层圆环图，详细配置，拿来直接用
vue中引入echarts的两种方式
江湖行骗老中医
07-29 962
1.安装echarts依赖 npm install echarts -S 2.创建图表 a:全局引入 main.js页面 import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue页面 <div id="myChart" :style="{width: '300px', height: '300px'}"></div> <script> export default
vue的echarts模板
02-22
建议标签放在vue里面，js拆出去，只在vue的methods里面引用方法。或者是直接抽组件。 内置了elementUI和路由还有封装的axios。 里面放了一个devicePixelRatio的插件，让网页滚动鼠标滑轮或者变大变小网页没有变化。...
在Vue中使用echarts的方法
08-28
直接引用ECharts 另外，我们还可以直接在index.html文件中全局引入ECharts，使用script标签引入： ``` <script src="/static/js/echarts/echarts.js"> ``` 注意，src中需要写入ECharts的路径。 此外，我们还需要在...
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
vue 调用 echarts省市区地图
02-15
在前端开发中，Vue.js 和 ECharts 是两个非常流行的库，Vue.js 用于构建用户界面，而 ECharts 是一个基于 JavaScript 的数据可视化库。在这个场景中，我们将探讨如何在 Vue 项目中调用 ECharts 来展示省市区地图，...
vue炫酷驾驶舱+echarts
12-13
这些组件在`index.vue`文件中被引用并组合在一起，形成了整个驾驶舱的界面。 VSCode（Visual Studio Code）是微软开发的一款免费且强大的源代码编辑器，支持多种语言，包括Vue.js。开发者选择VSCode作为开发环境，...
Echarts使用
weixin_43945122的博客
05-12 318
https://www.jsdelivr.com/package/npm/echarts 下载echarts.main.js 引入到要使用的页面 示例图： 详情使用代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
如何在Vue中使用Echarts实例图
yiwai6998的博客
10-07 1805
如何在Vue中使用Echarts实例图 由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。但是新手猛的上手的话，可能会有点束手无策，所以这篇就是来写一点入门的内容，外加自己一点的小心得。 一、首先要在项目中下载echarts依赖 npm install echarts -S //或者使用淘宝的镜像 cnpm install echarts -S 二、然后就要再main.js文件中来进行全局引入 // 引入echarts import echarts from
eachars报表折线图通用方法
格林王子举哥
04-24 1898
报表通用格式（eachar，highchars）通用 第一步，先将需要展示的数据封装成下面方式 数据格式为： [ { "xAxis":"所有科室", "yAxis":[ {"name":"报修量","value":"100"}, {"name":"完修量","value":"50"}, {...
vue中引用echarts组件的两种方式
Silence-Lee的博客
06-11 3360
1 下载echarts组件库 命令为： npm install echarts --save 2 两种使用方式 下载好后就可以在vue项目中使用了，使用时有全局使用和按需引入两种方式。 2.1 全局引入 在main.js中直接引入 缺点：完整引入Echarts，会额外的引入其他无用的配置文件，造成项目文件体积过大，首屏加载也会慢，资源加载耗时过长，影响用户体验 /** * @file 项目主入口 * @author yizuodao */ import Vue from 'vue' import
vue 中引用echarts
WANG_CODER的博客
08-28 1400
安装echarts  依赖 npm install echarts -S 全局引入 import echarts from 'echarts' HTML部分 &lt;div id="myChartId" style="height:500px;width:1000px"&gt;&lt;/div&gt; 初始化echarts created: function () { t...
Vue项目如何引入echarts
阿程的博客
03-23 6448
一、安装 echarts npm install echarts -S 二、main.js 中全局引入 echarts // 引入 echarts import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 三、使用 <template> <div class="column-container"> <div ref="monthWorkOrder" class="echarts-bo
如何在vue项目中引入echarts
Amelian的博客
12-11 5155
问题： 我在vue项目中使用npm install echarts --save下载echarts时，然后导入的时候发现一致提示如下错误： 后来在网上找发现时版本问题，当我使用上述命令下载时，下载的echarts版本时5.0的 后来我参考该博主的方法：https://blog.csdn.net/weixin_44874618/article/details/110647652 重新安装就可一正常使用的 效果如下： 具体代码如下： 1.在main.js中全局引入 2.随便创建一个要显示echarts图的
在vue中Echarts的使用与总结
Joy_B的博客
07-31 1233
本篇文章主要讲我在开发过程中使用到的Echarts使用案例，具体的更多特性可以参考Echarts官网。(注：因为项目机密的原因，本文的代码对敏感内容进行了修改) Echarts官网：https://echarts.baidu.com/ Echarts是一个开源的数据可视化工具,一个纯Javascript的图表库，用来制图特别方便。 在使用Echarts的时候，都需要导包，在中导入import ec...
vue引用echarts
09-08
在Vue项目中引用echarts，你可以按照以下步骤进行操作： 1. 安装echarts：在终端运行以下命令安装echarts依赖： ``` npm install echarts --save ``` 2. 引入echarts：在需要使用echarts的组件中，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

w_t_y_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值