首页 > 其他分享 >echat 折线图,展示全部数据

echat 折线图,展示全部数据

时间:2023-04-12 19:56:00浏览次数:36  
标签:const 展示 chart fontSize 折线图 yyData data legend echat

父:

import lineChart from './components/accountlintChart.vue'
components: { lineChart },

要设置 hazardBox 的宽高

<div class="hazardBox">
          <lineChart :chartData="tagTrendData" />
        </div>

 

子:

<template>
  <div ref="linechart" class="chart" />
</template>

<script>
import * as echarts from "echarts";
import fontSize from "@/utils/fontSize"

export default {
  props: {
    chartData: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      chart: null,
    };
  },
  watch: {
    chartData () {
      this.$nextTick(() => {
        this.initChart();
      });
    },
  },
  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.linechart);
      const data = this.chartData;
      const xxData = data.xxData;
      const yyData = data.yyData;
      // const legend = data.aimData.map((item) => item.name);
      let serieslist = [];
      for (let i in yyData) {
        serieslist.push({
          // name: legend[i],
          type: "line",
          stack: "总量" + i,
          data: yyData[i],
          smooth: true,
          symbol: "none",
          areaStyle: {
            normal: {
              //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(25,163,223,.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(25,163,223, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
        });
      }
      let option = {
        color: ["#31d2f2", "#4166e8"],
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: fontSize(),
          },
        },
        // legend: {
        //   show: false,
        //   data: legend,
        //   left: 20,
        //   top: "1%",
        //   textStyle: {
        //     fontSize: fontSize(),
        //   },
        // },
        grid: {
          top: "20%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xxData,
          axisLabel: {
            fontSize: fontSize(),
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: fontSize(),
          },
        },
        series: serieslist,
      };
      this.chart.setOption(option);
      // window.addEventListener("resize", () => {
      //   this.chart.resize();
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>

 

标签:const,展示,chart,fontSize,折线图,yyData,data,legend,echat
From: https://www.cnblogs.com/guohanting/p/17311021.html

相关文章

  • Vue3+element-plus封装文字超出一行,省略号显示,鼠标悬浮展示全部
    1.组件封装<template><el-tooltipeffect="dark":disabled="isShowTooltip":content="content"placement="top"><p:class="['line1',className]"@mouseover="onMouseOver(refNa......
  • 开源在线客服系统-客服系统历史消息记录功能-点击加载历史聊天记录-分页展示历史消息
    之前开发的开源在线客服系统gofly,访客端一直没有展示历史聊天记录,最近抽时间给加上了实现的效果就是,访客刚进聊天界面,如果存在历史记录,按5条分页,默认查询加载5条聊天记录。如果历史记录超过5条,顶部出现“点击加载更多”按钮,点击按钮就分页查询历史记录,堆入消息记录数组里。 ......
  • 实现页面展示左右上下错位效果
    前言:有个需求,页面显示类似淘宝首页那样左右上下错位展示效果,还有点时间,所以试验记录下效果。1、分左右栏布局<html><style>.list_left,.list_right{width:50%;float:left;}.listli{width:45%;height:6rem;}.list_leftli:n......
  • mysql 2023-04-09 23:59:59 999 为什么会展示为第二天
    在MySQL中,日期时间类型包括DATE、TIME、DATETIME、TIMESTAMP等。其中,DATETIME和TIMESTAMP类型可以表示具体的日期和时间,包含年、月、日、时、分、秒等信息。当使用DATETIME或TIMESTAMP存储日期时间值时,如果精度达到了秒级别以上,MySQL会进行四舍五入,将精度保留到秒级别......
  • 调用百度云api实现人脸库注册代码展示
    #encoding:utf-8importbase64importrequestsdefgetToken():ak='B7E2OqVuDAyDs7OsuGPuKa4y'sk='idObOz6jqA2GdU49L2VG4VPVhgmiidvD'host=f'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&cli......
  • 调用百度云api人脸库搜索代码及结果展示
    #encoding:utf-8importbase64importrequestsdefgetToken():ak='B7E2OqVuDAyDs7OsuGPuKa4y'sk='idObOz6jqA2GdU49L2VG4VPVhgmiidvD'host=f'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&cli......
  • 最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析
    demo软件园每日更新资源,请看到最后就能获取你想要的: 1.最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析多个接口福彩大数据分析小程序,数据来自于中国福利彩票 拥有双色球数据展示 双色球数据分析多个接口 数据有每日奖金和往期记录......
  • 一套简单的 Nginx 日志展示
    采用架构Nginx+Promtail+Loki+Grafana做个简单的Nginx日志展示本文无安装,简要点出配置需求。Nginx用编译安装(本文不做叙述),Promtail和Loki都选用二进制的方式进行安装,直接下载对应版本的二进制文件,解压后指定配置文件启动即可。promtail配置文件内容:server:http_listen_......
  • echart折线图,柱状图,饼图设置颜色
    之前在做报表的时候用过echart用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!!1、折线图修改颜色:1.xAxis:{2.'category',3.false,4.'年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']5.},......
  • 第一次原型展示
    我们今天的原型展示  然后基本的页面就是 ......