vue引用echarts柱形加折线统计图（周月年动态切换数据）

最新推荐文章于 2024-07-02 20:06:58 发布

就像风1样

最新推荐文章于 2024-07-02 20:06:58 发布

阅读量7.3k

点赞数 3

分类专栏： Vue 图表 vue专栏文章标签： vue echarts 柱形图折线图

本文链接：https://blog.csdn.net/qq_42221334/article/details/96307823

版权

本文介绍了如何在Vue项目中使用ECharts创建柱状图和折线图，并通过点击实现周、月、年数据的动态切换。提供了详细的入门教程链接及ECharts官方实例资源，帮助开发者掌握图表的使用技巧。

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

vue中安装 echarts 不会用的有入门篇介绍文章： https://blog.csdn.net/qq_42221334/article/details/95354424

思路：通过引用echarts图表实现固定数据展示，添加定位周，月，年通过点击动态切换数据即可

主要代码：

<template>
  <div>
    <div class="cardList_title">诊断数量统计</div>
    <div class="timeTitle"><span @click="leftWeek"> 周 </span> <span @click="leftMonth"> 月 </span><span @click="leftYear"> 年 </span></div>
    <div class="Chart_one" id="myChart1" ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftDataList:[200, 300,5