vue数据可视化项目遇到的问题总结

最新推荐文章于 2024-08-16 15:37:42 发布

NanDaJ

最新推荐文章于 2024-08-16 15:37:42 发布

阅读量404

点赞数

分类专栏： vue echarts 数据可视化文章标签： vue 数据可视化

本文链接：https://blog.csdn.net/bo646424926/article/details/117458962

版权

本文总结了在Vue项目中使用Echarts进行数据可视化的经验，包括axios文件引用路径、Vue组件生命周期的理解、地图的设置与问题解决，如地图下钻时调整尺寸，以及在不同series中处理tooltip和label显示。同时，文章还讨论了Vue打包过程中遇到的问题及解决方案。

摘要由CSDN通过智能技术生成

基于vue实现的世界地图下钻
演示地址

axios引用文件目录

要想用axios引用文件，则应该把文件放入到public文件夹上，public文件夹和src文件同一级

vue生命周期

vue生命周期详解

如何在vue中使用echarts设置地图

1.安装echarts

npm install echarts --save

2.引用echarts
在src目录下的main.js文件中

//引用echarts
import * as echarts from 'echarts'
//你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。
//这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
Vue.prototype.$echarts = echarts

3.使用echarts

this.$echarts.registerMap("world", geoJson);//geoJson是Json地图数据
let myChart = this.$echarts.init(document.getElementById("map"));
//setOption里面的问题，下面进行解释
let setOption = {
   
          title: {
   
            subtext: "",
            left: "center",
            top: "3%",
            textStyle: {
             
              color: "#d5e7f3",
              fontSize: 18,
              fontFamily:'微软雅黑',
              fontWeight:'bold'
            },
          },
          tooltip: {
   
            trigger:"item",
            formatter: function(params) {
   
              //根据params.seriesIndex判断数据是来自map的还是scatter的
              if(params.seriesIndex==0)
                return params.name + ":" +params.data.value[0]
              else
                return params.name + &#