2023vue2用vue-echarts实现图表

已于 2023-10-18 17:16:10 修改
阅读量3.2k 收藏 29
点赞数 12
文章标签： vue.js echarts 前端 javascript
于 2023-10-11 12:32:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feeeee889/article/details/133766158
版权

文章目录

【简单】学会在vue2用vue-echarts实现各种图表

🏕️背景：

​ 前段时间基于工作需要学习了vue-echarts，一开始各种论坛到处找，但发现令人满意的“流畅”实现教程很少，最终只能自己去看官方文档，一步步实现，终于在花费几个小时后实现人生中的第一个图表了，并且实现后非常很有成就感，能够应用这么炫酷的图表到页面中，真的太爽了，而且还可以自己挑选各种类型的图表，哈哈，所以今天来分享这丝滑的实现方式给各位（方法参考于官方文档-按需引入方式），保证够简单步骤够清晰，学会之后想用什么图表就用什么图表~

最终效果

⚡按照本文章的步骤，最终可实现官方的各种图表（非常简单暴力）。

实现步骤

✨️为了方便理解，我们采用一个干净的vue2项目来逐步实现👇。

0. 干净的页面

0️⃣首先，这是一个干净的vue2页面：

<template>
  <div id='test'>真的很干净</div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style lang='less' scope>

</style>

1. 安装包

1️⃣然后我们安装所需要的包：npm i echarts vue-echarts @vue/composition-api -S

💡概念：

  • echarts：前端最常用的图表库；
  • vue-echarts：基于echarts的封装工具，方便开发者更轻松的在vue2中使用echarts；
  • @vue/composition-api：是vue的官方插件，安装后我们就可以使用vue3里面的Composition API功能了。

🏷️说明：

  1. 使用vue-echarts就必须得安装echarts，你可以理解为vue-echarts是echarts的一个工具，让我们在vue中可以更加方便的使用echarts；

  2. @vue/composition-api是vue-echarts官方文档中要求使用的：

    “要在Vue2（<2.7.0）下使用 vue-echarts，需要确保 @vue/composition-api 已经安装”

    因为官方示例代码中是需要用到这个插件的，所以我们就按照要求安装吧，这就是一个扩展使用vue3功能的插件而已，好理解。

2. 格式化页面

2️⃣接着开始格式化页面（核心步骤）：

  1. 先引入必备的插件，并且我们预留一行（注释处），后面需要在这一行额外导入组件：

    // 这一行后续还需要放置导入代码
import VChart, { THEME_KEY } from "vue-echarts";
import { ref } from "vue";

    🏷️说明：VChart是图表的组件，后面以<v-chart>的形式放置到结构上，而THEME_KEY则是主题颜色，在下一步中用这个对象去配置主题颜色。

    完整代码

    <template>
  <div id='test'>真的很干净</div>
</template>

<script>
  // 这一行后续还需要放置导入代码
  import VChart, { THEME_KEY } from "vue-echarts";
  import { ref } from "vue";
  export default {
    data() {
      return {}
    },
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style lang='less' scope>

</style>

  2. 然后配置components、provide、setup(){}（后两个是@vue/composition-api带来的，属于Vue3的新特性）：

    export default {
    ...
    components:{
        VChart,
    },
    provide: {
        // 主题颜色（white/dark）
        [THEME_KEY]: "white",
    },
    setup(){
        const option = ref('此处放置option对象');
    	return { option };
    }，
    ...
}

    🏷️说明：

    • components注册VChart组件；
    • provide对象中配置主题颜色，引入THEME_KEY这个对象作为键名，然后就可以设置值了：white（白色）和dark（黑色）；
    • setup(){}中用于配置option配置对象，配置对象将决定图表长啥样，其中我用字符串预留了一处位置，即'此处放置option对象'这个地方，后面将用于放置option配置项。

    完整代码

    <template>
  <div id='test'>真的很干净</div>
</template>

<script>
  // 这一行后续还需要放置导入代码
  import VChart, { THEME_KEY } from "vue-echarts";
  import { ref } from "vue";
  export default {
    data() {
      return {}
    },
    components:{
      VChart,
    },
    provide: {
        // 主题颜色（white/dark）
        [THEME_KEY]: "white",
    },
    setup(){
        const option = ref(此处放置option对象);
    	return { option };
    },
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style lang='less' scope>

</style>

  3. 放置组件，以及设置下元素样式：

    <v-chart class="chart" :option="option" autoresize />

    <style lang='less' scope>
  #test{
    width: 100%;
    height: 100vh;
  }
</style>

    🏷️说明：v-chart是图表的组件元素、option是它的数据配置对象、autoresize是设定图表跟随页面尺寸自动缩放。

    完整代码

    <template>
  <div id='test'>
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
  // 这一行后续还需要放置导入代码
  import VChart, { THEME_KEY } from "vue-echarts";
  import { ref } from "vue";
  export default {
    data() {
      return {}
    },
    components:{
      VChart,
    },
    provide: {
        // 主题颜色（white/dark）
        [THEME_KEY]: "white",
    },
    setup(){
        const option = ref('此处放置option对象');
    	return { option };
    },
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style lang='less' scope>
  #test{
    width: 100%;
    height: 100vh;
  }
</style>

3. 挑选图表

3️⃣经过上面的关键步骤后，我们就初始化配置好了页面，当然现在页面还无法显示出图表，接下来我们就可以开始挑选图表了，进入echarts的官网示例处：👉点我点我👈，然后我们就到了一个“熟悉”的页面（前面提到过），好的，然后我们挑选一个最简单的：

点击进来之后，我们可以看到官方居然为我们提供了这个图表的option配置对象！所以我们先将这个配置对象复制，然后粘贴到我们前面准备的'此处放置option对象'这个地方：

{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}

⚙️这些是配置项哦，现在先不管各项配置是干嘛的，复制就完啦（最后面再介绍是干嘛的：先实现，再理解）！

完整代码

<template>
  <div id="test">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
// 这一行后续还需要放置导入代码
import VChart, { THEME_KEY } from "vue-echarts";
import { ref } from "vue";
export default {
  data() {
    return {};
  },
  components: {
    VChart,
  },
  provide: {
    // 主题颜色（white/dark）
    [THEME_KEY]: "white",
  },
  setup() {
    const option = ref({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });
    return { option };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang='less' scope>
#test {
  width: 100%;
  height: 100vh;
}
</style>

4. 最终配置

4️⃣将option配置对象复制进来之后，就差最后一步啦！此时我们进入vue-echarts官网的导入代码生成器👉点我点我👈（这个东西能帮我们节省很多时间，根据option对象智能生成需要导入的组件代码）：

进来之后我们将刚才复制的option配置对象粘贴到这个页面左侧的地方，然后就会发现右边出现了代码，于是我们再点击右边的Copy按钮，就得到了相应的组件导入代码了~

然后接下来，就只真的差最后最后一步了！还记得之前我们预留了一行注释吗？没错，我们将导入的代码粘贴到那里，就okkkkkkkk啦！！！

🎉实现效果如图：

import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([GridComponent, LineChart, CanvasRenderer])

🔩这些是导入的图表组件，属于按需引入。

完整代码

<template>
  <div id="test">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import { GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([GridComponent, LineChart, CanvasRenderer]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref } from "vue";
export default {
  data() {
    return {};
  },
  components: {
    VChart,
  },
  provide: {
    // 主题颜色（white/dark）
    [THEME_KEY]: "white",
  },
  setup() {
    const option = ref({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });
    return { option };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang='less' scope>
#test {
  width: 100%;
  height: 100vh;
}
</style>

5. OK

🆗至此，我们就成功实现人生中的第一个图表啦（对于我来说是这样的）~

学习更多

💪通过上面的步骤例子，我们学会了如何实现一个图表，感觉是不是很简单很暴力（得益于贴心的echarts和vue-echarts），没错，我也是这么觉得的~不过呢，光这样子肯定还不够满足业务需求，所以下面我还会为各位介绍下关于echarts和vue-echarts的更多学习与扩展。

如何设定图表样式

🎨设定样式应该是最简单的事情了吧？其实我们只需要给<v-chart>元素的父级元素写上样式就可以限制图表的大小了，并且还可以通过将THEME_KEY修改为dark将图表变成暗黑系主题哟（还可以到官网寻找更多主题哦）：

<style lang='less' scope>
#test {
  width: 400px;
  height: 400px;
}
</style>

provide: {
  // 主题颜色（white/dark）
  [THEME_KEY]: "dark",
},

如何了解配置项

⚙️图表的配置项，其实都非常简单（3D除外），为什么这么说呢？因为官方文档全都给你写得明明白白的！我们可以通过echarts或vue-echarts的官方文档来了解各个配置项（只有部分配置项需要参考vue-echarts的文档，例如THEME_KEY设置主题颜色，而大部分配置项仍是参考echarts的），如下图：

可以看到，官方文档的配置项是相当的齐啊，可以说无论什么配置，只要你想知道，你就可以从官方文档中找到它的解释，因此我说配置项非常简单是合理的（3D除外），官方文档链接放文章最底部了~

如何实现动态更新数据

📊前面我们的图表数据都是一开始写死的，而动态更新图表的数据，却是图表中最常见的需求了，所以下面，我们就来实现动态更新数据：

  1. 首先，图表的配置项通常是option.series[0].data这一个，如图：

  2. 但是这个option是放在这个什么setup(){}里面的，我不懂Vue3该怎么做？哦，没关系，你只需要把它当成是Vue2里面的data就行了，因此，事情变得非常简单了，直接赋值就行了~这里我就用一个定时器来简单示例一下：

    mounted() {
  setTimeout(()=>{
    this.option.series[0].data = [999,1,2,3,4,5,666]
  },2000)
},

    ⏰️我们在mounted这个钩子加上一个定时器，2秒后，将数据更改为[999,1,2,3,4,5,666]，效果如下图：

  3. 考虑到图表业务通常都是一开始没有数据，然后通过接口获取数据后，再渲染图表数据的，因此，这里我们还需要实现下这一种业务场景：

    • 首先，一开始没有数据，也就意味着一开始图表数据为空，因此我们将配置项的数据全改为null：

      const option = ref({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [null, null, null, null, null, null, null],
      type: "line",
    },
  ],
});

      👇然后效果如下图：

    • 通过上图，我们可以看到数据一开始为空了，在2秒后才出现的数据，但是呢，这样的用户体验十分不好，一开始容易让用户以为是卡了，没有任何的提示，正常业务逻辑都是一开始图表加上提示，比如正在加载中之类的提示，然后等数据出现了之后，图表才真正的显示出来，不过，这种常见的需求，echarts官方早就替我们考虑到了，因此我们可以直接通过配置项来实现：

      • 定义变量，并给元素加上loading属性：

        data() {
  return {
    loadingIsShow:true,
  };
},

        <v-chart class="chart" :option="option" autoresize :loading="loadingIsShow"/>

      • 引入加载提示的配置项键名对象并配置：

        import VChart, { THEME_KEY,LOADING_OPTIONS_KEY } from "vue-echarts";

        provide: {
  // 主题颜色（white/dark）
  [THEME_KEY]: "dark",
  // 加载提示的配置项
  [LOADING_OPTIONS_KEY]:{
    text:'正在加载中'
  }
},

      • 在2秒后隐藏加载提示：

        mounted() {
  setTimeout(()=>{
    this.option.series[0].data = [999,1,2,3,4,5,666]
    this.loadingIsShow = false
  },2000)
},

        👇最终效果如图：

  4. 👌这样就成功实现动态数据更新以及显示加载提示了~

如何使用其他图表

📈从一开始的例子中，我们实现了一个最简单的图表，而从echarts官方的示例大全中，其实还有非常非常多各种各样的复杂图表，所以呢，我们想要什么图表就可以直接复制它的option配置对象去配置，除了有一些非常复杂的3D地图图表除外（可能需要花费一部分时间去了解复杂的配置项才可以实现），其实大部分图表呢，都是可以按照上面的配置步骤去实现的，这里我就从官方示例中挑选了几个比较炫酷的图表一起实现到了单个页面中，如下图：

⚠️注意：部分图表（就是那个3D地球）的配置项可能会有点复杂，导入代码生成器无法正确生成，需要自己去琢磨研究官方文档的配置项哦，这里就不详细介绍了~

🥳是不是很酷，快点自己去动手实现一下吧，然后就可以在小伙伴面前装逼炫耀了哈哈哈

还是放上完整代码吧，以供参考：

<template>
  <div id="test">
    <v-chart class="chart" :option="option" />
    <v-chart class="chart" :option="option2" />
    <v-chart class="chart" :option="option3" />
    <v-chart class="chart" :option="option4" />
  </div>
</template>

<script>
// 3D地球的
// ----------------------------
// 需要先npm i echarts-gl
import { use } from "echarts";
import { GlobeComponent } from "echarts-gl/components";
use([GlobeComponent]);
// AQI 分布
// ----------------------------
const dataBJ = [
  [1, 55, 9, 56, 0.46, 18, 6, "良"],
  [2, 25, 11, 21, 0.65, 34, 9, "优"],
  [3, 56, 7, 63, 0.3, 14, 5, "良"],
  [4, 33, 7, 29, 0.33, 16, 6, "优"],
  [5, 42, 24, 44, 0.76, 40, 16, "优"],
  [6, 82, 58, 90, 1.77, 68, 33, "良"],
  [7, 74, 49, 77, 1.46, 48, 27, "良"],
  [8, 78, 55, 80, 1.29, 59, 29, "良"],
  [9, 267, 216, 280, 4.8, 108, 64, "重度污染"],
  [10, 185, 127, 216, 2.52, 61, 27, "中度污染"],
  [11, 39, 19, 38, 0.57, 31, 15, "优"],
  [12, 41, 11, 40, 0.43, 21, 7, "优"],
  [13, 64, 38, 74, 1.04, 46, 22, "良"],
  [14, 108, 79, 120, 1.7, 75, 41, "轻度污染"],
  [15, 108, 63, 116, 1.48, 44, 26, "轻度污染"],
  [16, 33, 6, 29, 0.34, 13, 5, "优"],
  [17, 94, 66, 110, 1.54, 62, 31, "良"],
  [18, 186, 142, 192, 3.88, 93, 79, "中度污染"],
  [19, 57, 31, 54, 0.96, 32, 14, "良"],
  [20, 22, 8, 17, 0.48, 23, 10, "优"],
  [21, 39, 15, 36, 0.61, 29, 13, "优"],
  [22, 94, 69, 114, 2.08, 73, 39, "良"],
  [23, 99, 73, 110, 2.43, 76, 48, "良"],
  [24, 31, 12, 30, 0.5, 32, 16, "优"],
  [25, 42, 27, 43, 1, 53, 22, "优"],
  [26, 154, 117, 157, 3.05, 92, 58, "中度污染"],
  [27, 234, 185, 230, 4.09, 123, 69, "重度污染"],
  [28, 160, 120, 186, 2.77, 91, 50, "中度污染"],
  [29, 134, 96, 165, 2.76, 83, 41, "轻度污染"],
  [30, 52, 24, 60, 1.03, 50, 21, "良"],
  [31, 46, 5, 49, 0.28, 10, 6, "优"],
];
var dataGZ = [
  [1, 26, 37, 27, 1.163, 27, 13, "优"],
  [2, 85, 62, 71, 1.195, 60, 8, "良"],
  [3, 78, 38, 74, 1.363, 37, 7, "良"],
  [4, 21, 21, 36, 0.634, 40, 9, "优"],
  [5, 41, 42, 46, 0.915, 81, 13, "优"],
  [6, 56, 52, 69, 1.067, 92, 16, "良"],
  [7, 64, 30, 28, 0.924, 51, 2, "良"],
  [8, 55, 48, 74, 1.236, 75, 26, "良"],
  [9, 76, 85, 113, 1.237, 114, 27, "良"],
  [10, 91, 81, 104, 1.041, 56, 40, "良"],
  [11, 84, 39, 60, 0.964, 25, 11, "良"],
  [12, 64, 51, 101, 0.862, 58, 23, "良"],
  [13, 70, 69, 120, 1.198, 65, 36, "良"],
  [14, 77, 105, 178, 2.549, 64, 16, "良"],
  [15, 109, 68, 87, 0.996, 74, 29, "轻度污染"],
  [16, 73, 68, 97, 0.905, 51, 34, "良"],
  [17, 54, 27, 47, 0.592, 53, 12, "良"],
  [18, 51, 61, 97, 0.811, 65, 19, "良"],
  [19, 91, 71, 121, 1.374, 43, 18, "良"],
  [20, 73, 102, 182, 2.787, 44, 19, "良"],
  [21, 73, 50, 76, 0.717, 31, 20, "良"],
  [22, 84, 94, 140, 2.238, 68, 18, "良"],
  [23, 93, 77, 104, 1.165, 53, 7, "良"],
  [24, 99, 130, 227, 3.97, 55, 15, "良"],
  [25, 146, 84, 139, 1.094, 40, 17, "轻度污染"],
  [26, 113, 108, 137, 1.481, 48, 15, "轻度污染"],
  [27, 81, 48, 62, 1.619, 26, 3, "良"],
  [28, 56, 48, 68, 1.336, 37, 9, "良"],
  [29, 82, 92, 174, 3.29, 0, 13, "良"],
  [30, 106, 116, 188, 3.628, 101, 16, "轻度污染"],
  [31, 118, 50, 0, 1.383, 76, 11, "轻度污染"],
];
var dataSH = [
  [1, 91, 45, 125, 0.82, 34, 23, "良"],
  [2, 65, 27, 78, 0.86, 45, 29, "良"],
  [3, 83, 60, 84, 1.09, 73, 27, "良"],
  [4, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
  [5, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
  [6, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
  [7, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
  [8, 89, 65, 78, 0.86, 51, 26, "良"],
  [9, 53, 33, 47, 0.64, 50, 17, "良"],
  [10, 80, 55, 80, 1.01, 75, 24, "良"],
  [11, 117, 81, 124, 1.03, 45, 24, "轻度污染"],
  [12, 99, 71, 142, 1.1, 62, 42, "良"],
  [13, 95, 69, 130, 1.28, 74, 50, "良"],
  [14, 116, 87, 131, 1.47, 84, 40, "轻度污染"],
  [15, 108, 80, 121, 1.3, 85, 37, "轻度污染"],
  [16, 134, 83, 167, 1.16, 57, 43, "轻度污染"],
  [17, 79, 43, 107, 1.05, 59, 37, "良"],
  [18, 71, 46, 89, 0.86, 64, 25, "良"],
  [19, 97, 71, 113, 1.17, 88, 31, "良"],
  [20, 84, 57, 91, 0.85, 55, 31, "良"],
  [21, 87, 63, 101, 0.9, 56, 41, "良"],
  [22, 104, 77, 119, 1.09, 73, 48, "轻度污染"],
  [23, 87, 62, 100, 1, 72, 28, "良"],
  [24, 168, 128, 172, 1.49, 97, 56, "中度污染"],
  [25, 65, 45, 51, 0.74, 39, 17, "良"],
  [26, 39, 24, 38, 0.61, 47, 17, "优"],
  [27, 39, 24, 39, 0.59, 50, 19, "优"],
  [28, 93, 68, 96, 1.05, 79, 29, "良"],
  [29, 188, 143, 197, 1.66, 99, 51, "中度污染"],
  [30, 174, 131, 174, 1.55, 108, 50, "中度污染"],
  [31, 187, 143, 201, 1.39, 89, 53, "中度污染"],
];
var schema = [
  { name: "date", index: 0, text: "日期" },
  { name: "AQIindex", index: 1, text: "AQI" },
  { name: "PM25", index: 2, text: "PM2.5" },
  { name: "PM10", index: 3, text: "PM10" },
  { name: "CO", index: 4, text: " CO" },
  { name: "NO2", index: 5, text: "NO2" },
  { name: "SO2", index: 6, text: "SO2" },
  { name: "等级", index: 7, text: "等级" },
];
var lineStyle = {
  width: 1,
  opacity: 0.5,
};
import { ParallelChart } from "echarts/charts";
import {
  LegendComponent,
  TooltipComponent,
  VisualMapComponent,
  ParallelComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([
  LegendComponent,
  TooltipComponent,
  VisualMapComponent,
  ParallelComponent,
  ParallelChart,
  CanvasRenderer,
]);
// 饼图
// ----------------------------
import { PieChart } from "echarts/charts";

use([PieChart]);
// 柱状图
// ----------------------------
import { BarChart } from "echarts/charts";
import { GridComponent, MarkLineComponent } from "echarts/components";

use([GridComponent, MarkLineComponent, BarChart]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref } from "vue";
export default {
  data() {
    return {};
  },
  components: {
    VChart,
  },
  provide: {
    // 主题颜色（white/dark）
    [THEME_KEY]: "dark",
  },
  setup() {
    const option = ref({
      backgroundColor: "#000",
      globe: {
        baseTexture: require("@/assets/img/world.topo.bathy.200401.jpg"),
        heightTexture: require("@/assets/img/world.topo.bathy.200401.jpg"),
        displacementScale: 0.04,
        shading: "realistic",
        environment: require("@/assets/img/starfield.jpg"),
        realisticMaterial: {
          roughness: 0.9,
        },
        postEffect: {
          enable: true,
        },
        light: {
          main: {
            intensity: 5,
            shadow: true,
          },
          ambientCubemap: {
            diffuseIntensity: 0.2,
          },
        },
      },
    });
    const option2 = ref({
      backgroundColor: "#333",
      legend: {
        bottom: 30,
        data: ["Beijing", "Shanghai", "Guangzhou"],
        itemGap: 20,
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      tooltip: {
        padding: 10,
        backgroundColor: "#222",
        borderColor: "#777",
        borderWidth: 1,
      },
      parallelAxis: [
        {
          dim: 0,
          name: schema[0].text,
          inverse: true,
          max: 31,
          nameLocation: "start",
        },
        { dim: 1, name: schema[1].text },
        { dim: 2, name: schema[2].text },
        { dim: 3, name: schema[3].text },
        { dim: 4, name: schema[4].text },
        { dim: 5, name: schema[5].text },
        { dim: 6, name: schema[6].text },
        {
          dim: 7,
          name: schema[7].text,
          type: "category",
          data: ["优", "良", "轻度污染", "中度污染", "重度污染", "严重污染"],
        },
      ],
      visualMap: {
        show: true,
        min: 0,
        max: 150,
        dimension: 2,
        inRange: {
          color: ["#d94e5d", "#eac736", "#50a3ba"].reverse(),
          // colorAlpha: [0, 1]
        },
      },
      parallel: {
        left: "5%",
        right: "18%",
        bottom: 100,
        parallelAxisDefault: {
          type: "value",
          name: "AQI指数",
          nameLocation: "end",
          nameGap: 20,
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#aaa",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#777",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "Beijing",
          type: "parallel",
          lineStyle: lineStyle,
          data: dataBJ,
        },
        {
          name: "Shanghai",
          type: "parallel",
          lineStyle: lineStyle,
          data: dataSH,
        },
        {
          name: "Guangzhou",
          type: "parallel",
          lineStyle: lineStyle,
          data: dataGZ,
        },
      ],
    });
    const option3 = ref({
      title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    });
    const option4 = ref({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {},
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "Email",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "Union Ads",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "Video Ads",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "Search Engine",
          type: "bar",
          data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          emphasis: {
            focus: "series",
          },
          markLine: {
            lineStyle: {
              type: "dashed",
            },
            data: [[{ type: "min" }, { type: "max" }]],
          },
        },
        {
          name: "Baidu",
          type: "bar",
          barWidth: 5,
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [620, 732, 701, 734, 1090, 1130, 1120],
        },
        {
          name: "Google",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 290, 230, 220],
        },
        {
          name: "Bing",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [60, 72, 71, 74, 190, 130, 110],
        },
        {
          name: "Others",
          type: "bar",
          stack: "Search Engine",
          emphasis: {
            focus: "series",
          },
          data: [62, 82, 91, 84, 109, 110, 120],
        },
      ],
    });
    return { option, option2, option3, option4 };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang='less' scope>
#test {
  display: flex;
  width: 100%;
  height: 100vh;
  flex-wrap: wrap;
  .chart {
    width: 50%;
    height: 50vh;
  }
}
</style>

文档链接

最后，放上echarts和vue-echarts的官方中文文档链接：

第一次写这么长的文章，按照自己喜欢的风格排版了，嘻嘻

feeeee889
关注
  • 12
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
oview:Vue移动端图表库（饼状图，柱状图，条形图，折线图，雷达图，散点图，气泡图等）
05-14
oView Vue.js移动端图表库 oView是基于 图表库的二次封装，以便于Vue.js开发者在移动端和PC端更好进行图表的展示。 vue插件 vue add oview vue invoke vue-cli-plugin-oview NPM安装 npm install oview --save //或者使用yarn yarn add oview 使用 //main.js中 import oView from "oview"; Vue.use(oView); oview默认会使用:o-chart,o-line的方式全局注册组件。使用时，请记得使用o-x的方式哦 oView特性 1、oview支持哪些图？ 目前oview支持：柱状图，饼状图，面积图，散点图，气泡图，折线图 ，雷达图。 2、图表配置简单 <!-- 没错，配置一个饼状图就是这么简单---> <o-chart :data="d
【大屏可视化模板】vue-dataV-echarts-elementul大屏数据可视化方案，屏幕适配方案等比例缩放
04-08
用了vue - echarts - datav-elementul大屏数据可视化方案，包含屏幕适配方案等比例缩放， 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小，而是可以用部分px直接写css定死，通过屏幕大小改变对应等比例缩放，达到屏幕适配效果 为了让大家直观的看到所有的代码，所以结构方法等就不分各个组件引入了，会很麻烦要找哪是哪，我直接把所有的图都写在了一个vue组件内。并配上注释，相信大家可以很容易找到哪里对应哪里区域
Vue2如何引入Echarts
MMF博客园
03-05 716
Vue2如何引入Echarts
vue-echarts 中文版
m0_55832273的博客
11-29 8172
Vue-ECharts
Vue项目中Echarts图表的引入、使用，以及封装成Echarts组件使用
我的博客
10-18 1559
Vue项目中Echarts图表的引入、使用，以及封装成Echarts组件使用
dataV:数据可视化展示系统，使用vue，iview，vue-echarts，echarts，vue-video-player开发，具有各种基本图表，地图展示，视频监控等功能
03-11
datav大数据可视化系统 iview版本2 第一版请看分支 这一版本主要使用开发同样采用vue，vue-echarts，echarts开发，增加了vue-video-player播放视频流，增加了视频监控。 如何使用 git clone https://github.com/fuyi501/dataV.git npm install npm run serve 效果图 后面增加。。。 :face_with_tears_of_joy: :face_with_tears_of_joy: :face_with_tears_of_joy: 开发工具 主要采用echarts开发， echarts开发起来很方便，文档也很全，可以直接使用vue+echarts开发。 不过vue中更新数据之后需要图表及时更新，我们使用echarts的话，需要自己的封装组件实现动态刷新vue-echarts使用vue-echarts可以直接实现目的，所以整个系统主要采用vue-echarts开发。 但是里面还有一个问题是地图的使用， vue-echa
ECharts入门
qq_45835940的博客
01-03 3115
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
vue-echarts配置项详解
浮游的博客
07-28 3299
最近接手了一个vue3项目，echarts用的是"vue-echarts": “^6.0.0”，每次查看文档的时候痛苦不已，找一个配置要花费大量时间，所以这篇文章，主要就是为了记录比较常见的一些配置。在package.json中的dependencies里面加一行"vue-echarts": “^6.0.0”，然后npm install，进行安装，这是最简单的。官方文档（写的不详细，很多都是让跳转到echarts官网，再去查找）主要会写三种图的配置项：圆环图、直线图、柱状图。在main.js中引入。
在vue2中使用echarts,vue-echarts,v-charts
jieyucx的博客
03-28 5146
可以看到使用 组件了之后可以省去那些繁琐的获取。注册组件之后我们全局都可以直接使用组件了。同样的安装导入，v-charts同样依赖echarts。的原型上，这样我们在全局都可以通过。钩子中写逻辑代码，具体步骤如下，步骤差不多，只不过我们需要在。准备工作做好了，咱们看个例子。绘制如图所示的一个示例图。代码只是圈住的图的部分。
vue 图表_一个超简单好用的图表框架 v-charts
热门推荐
weixin_39882317的博客
12-09 1万+
为什么使用v-charts在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项，便可轻松生成常见的图表。文档链接：官方文档：https://v-charts.js.org/#/gitHub: https...
Vue中如何进行图表绘制
程序员徐师兄的博客
06-11 2781
数据可视化是Web应用中非常重要的一部分，其中图表绘制是其中的重要环节。Vue作为一款流行的前端框架，提供了很多优秀的图表库，以满足不同业务场景下的需求。本文将介绍如何在Vue中进行图表绘制，包括使用Vue插件和使用第三方图表库。
在vue中使用vue-echarts-v3的实例代码
12-01
•支持按需导入ECharts.js图表​​和组件 •支持组件调整大小事件自动更新视图 一、安装 npm install --save echarts vue-echarts-v3 二、用法 用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js ...
vue-echarts-v3：ECharts.js（v3.x +）的Vue.js（v2.x +）组件包装
02-03
vue-echarts-v3 于 v3.x+ v2.x+组件包装 特征 轻量，高效，按需绑定事件； 支持按需导入ECharts.js图表​​和组件； 支持组件调整大小事件自动更新视图； 安装 $ npm install --save echarts vue-echarts-v3 用法...
vue print.js打印支持Echarts图表操作
01-18
网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js ...以下是我修改过的 ...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 627
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 363
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 259
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 282
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 351
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue3中使用vue-echarts
09-16
在Vue 3项目中使用vue-echarts，你可以按照以下步骤进行操作： 1. 首先，在你的Vue 3项目中安装vue-echarts依赖： ``` npm install vue-echarts echarts ``` 2. 在你的App.vue文件中导入echarts和vue-echarts，并使用provide将echarts实例提供给子组件： ```javascript import { createApp, provide } from 'vue' import App from './App.vue' import * as echarts from 'echarts' import { use } from 'echarts/core' import { CanvasRenderer } from 'echarts/renderers' import { BarChart } from 'echarts/charts' import { GridComponent, TooltipComponent, ToolboxComponent, DataZoomComponent, LegendComponent } from 'echarts/components' use([CanvasRenderer, BarChart, GridComponent, TooltipComponent, ToolboxComponent, DataZoomComponent, LegendComponent]) const app = createApp(App) app.config.globalProperties.$echarts = echarts app.mount('#app') app.use(provide, 'echarts', echarts) ``` 3. 在需要使用echarts的组件中，通过inject获取echarts实例，并使用相应的echarts选项进行图表的渲染，例如： ```html <template> <div> <div ref="chart" style="width: 400px; height: 400px;"></div> </div> </template> <script> import { inject, onMounted } from 'vue' export default { name: 'ChartComponent', setup() { const echarts = inject('echarts') onMounted(() => { const chart = echarts.init(document.getElementById('chart')) chart.setOption({ // 设置相应的echarts选项 }) }) } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值