vue 项目使用echarts图表

最新推荐文章于 2024-08-19 13:30:48 发布

孙小笔

最新推荐文章于 2024-08-19 13:30:48 发布

阅读量2.7k

点赞数

分类专栏：笔记 Vue 原创

本文链接：https://blog.csdn.net/qq_15238979/article/details/90705369

版权

本文档介绍了如何在Vue项目中使用Echarts库来创建图表，重点提及了官方配置选项，如xAxis.axisLine，并提供了趋势线的实现资源。

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

官方文档：https://www.echartsjs.com/option.html#xAxis.axisLine
趋势线：https://github.com/ecomfe/echarts-stat

<!-- 后台统计图表 -->
<template>
  <div>
    后台统计图表
    <div class="echart">
      <div id="main" :style="{
      width: '100%', height: '2.6rem',margin:'0 auto'}"></div>
    </div>
    <div class="choose-wrap">
      <div
        class="item-choose nochecked"
        v-for="(val,index) in chooseData"
        :key="index"
        @click="filtActiveData(val,$event)"
      >
        <div class="item-cicom" :style="{
      background:val.color}"></div>
        <div class="item-ctext">{
  {val.name}}</div>
      </div>
      <div class="item-choose nochecked trendline">
        <div class="item-ctext">----- 趋势线</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from "echarts";
import ecStat from "echarts-stat";
import {
     setTimeout } from "timers";

export default {
    
  //import引入的组件需要注入到对象中才能使用
  components: {
    },
  data() {
    
    //这里存放数据
    return {
    
      // 所有的数据
      chooseData: [],
      // 选中的数据
      activeData: [],
      // 图表配置数据
      seriesData: [],
      // 默认显示的月份
      xshowData: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12"
      ],
      // 默认隐藏的月份
      xhideData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {
    },
  //监控data中的数据变化
  watch: {
    
    seriesData() {
    
      this.echartDraw();
    }
  },
  //方法集合
  methods: {
    
    // 过滤选中的数据
    // typeObj,  操作的学院数据
    // event,  如果存在的时候,说明不是显示全部
    filtActiveData(typeObj, event) {
    
      //  es6 判断有没有数组是否存在一个值 如果有就删除,没有就添加
      this.activeData.includes(typeObj)
        ? (this.activeData = this.activeData.filter(n => n !== typeObj))
        : this.activeData.push(typeObj);

      //  存在说明是用户主动点击的
      //  不存在说明是初始化了全部数据
      if (event) {
    
        const eventObj = event.currentTarget;
        if (this.activeData.includes(typeObj)) {
    
          eventObj.classList.remove("nochecked");
        } else {
    
          eventObj.classList.add("nochecked");
        }
        // 如果点击的不是其它就去除全部的选中状态
        // 否则点击的是全部就去除其它所有的数据
        if (typeObj.name != "全部") {
    
          this.activeData = this.activeData.filter(n => n.name !== "全部");
          setTimeout(() => {
    
            let cone = document.getElementsByClassName("item-choose")[0];
            cone.classList.add("nochecked");
          });
        } else {
    
          this.activeData = [];