vue中或者html5中怎么修改自定义的【空气质量echarts图】，以及数据可视化图表自适应页面盒子宽高。

最新推荐文章于 2023-08-21 15:06:10 发布

禾小毅

最新推荐文章于 2023-08-21 15:06:10 发布

阅读量793

点赞数 1

分类专栏： HTML+CSS+Javascript echarts 文章标签：可视化数据可视化 jquery js 前端

本文链接：https://blog.csdn.net/weixin_50450473/article/details/119141929

版权

echarts 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

HTML+CSS+Javascript

6 篇文章 0 订阅

订阅专栏

首先，以echarts官网 “基础折线图” 左图为例，修改成右图 “空气污染程度折线图”

步骤如下：

1、修改x轴的参数，图表背景色，xy轴文字颜色

2、为图标的在y轴上添加背景色区块

3、在y轴右侧加上文字描述

4、将x轴上的日期对应到每个刻度节点上

5、在图标中鼠标移动上去显示相关数据

6、为图表加上多组折线图数据

7、调整一下上下左右边距，修改 grid 属性即可

8、设置html和css相关内容，将js引入html并展示

一、修改x轴的参数，图表背景色，xy轴文字颜色

option = {
  backgroundColor: "#000", // 全图背景色
  xAxis: {
    type: 'category',
    data: ['11-23','11-24','11-25','11-26','11-27','11-28','11-29'], // x轴自定义数据
    axisLabel: {
      textStyle: { // x轴文字样式
        color: '#fff'
      }
    }
  },
  yAxis: {
    type: 'value',

    // y轴文字样式
    axisLabel: {
      textStyle: { 
        color: '#fff'
      }
    }
  }
}

如下图所示

二、为图标的在y轴上添加背景色区块

此处：根据空气质量AQI划分六种评价类别和表征颜色

优（绿色）

良（黄色）

轻度污染（橙色）

中度污染（红色）

重度污染（紫色）

严重污染（褐红色）

option = {
  series: [
    {
      name: "空气质量",
      type: 'line',
      data: [200, 250, 100, 300, 150, 250, 200, 200], // 折线图当前的参数数组
      color: "#0097F5",
      markArea: {
        markArea: {
          data: [ // 根据 y轴区间 [0,50] 设置背景色为绿色
            [{
              yAxis: '0',
              itemStyle: {
                color: 'rgba(7, 201, 8, 1)'
              }
            }, {
              yAxis: '50'
            }],
            [{  // [50,100] 设置背景色为黄色
              yAxis: '50',
              itemStyle: {
                color: 'rgba(255,255,0, 1)'
              }
            }, {
              yAxis: '100'
            }],
            [{ // [100,150] 设置背景色为橙色
              yAxis: '100',
              itemStyle: {
                color: 'rgba(254,103,0,1)'
              }
            }, {
              yAxis: '150'
            }],
            [{ // [150,200] 设置背景色为红色
              yAxis: '150',
              itemStyle: {
                color: 'rgba(253, 1, 0, 1)'
              }
            }, {
              yAxis: '200'
            }],
            [{ // [200,300] 设置背景色为紫色
              yAxis: '200',
              itemStyle: {
                color: 'rgba(130,0,127,1)'
              }
            }, {
               yAxis: '300'
            }],
            [{ // [300,400] 设置背景色为褐红色
              yAxis: '300',
              itemStyle: {
                color: 'rgba(128, 0, 0, 1)'
              }
            }, {
              yAxis: '400'
            }]
         ]
      }
    }
  ]
  ......
}

效果如下，此时发现 y轴 [300,400] 的区间并不存在

解决方法如下：在y轴上添加最大值和最小值 max 和 min

yAxis: {
  type: 'value',
  max: 400,
  min: 0,
  ......
}

三、在y轴右侧加上文字描述

将yAxis改为数组，yAxis: []，里面包含两个参数对象，一个是左侧类型为 value 的数字对象，type: 'value'；一个是右侧类型为 category 的文字对象 type: 'category'

yAxis: [
  {   // 左侧的数字内容
    type: 'value',
    ......
    ......
  },
  {  // 右侧的文字内容
    type: 'category',
    ......
    ......
  }
]

在右侧加上 ['优','良','轻度污染','中度污染','重度污染','严重污染']

yAxis: [
  {   // 左侧的数字内容
    type: 'value',
    ......
    ......
  },
  {  // 右侧的文字内容
    type: 'category',
    data:['优','良','轻度污染','中度污染','重度污染','严重污染']

    // y轴右侧刻度线颜色
    axisLine: {
      lineStyle: {
         color: '#fff'
      }
    },

    // 虚线网格
    splitLine: {
      lineStyle: {
         color: '#fff',
         width: 1,
         type: 'dashed'
      }
    }
  }
]

加上之后文字是横向的，发现不美观，于是改成纵向，只需将data中的值单个字符后加上 “ \n ”，写法如下：

data:["优","良","轻\n度\n污\n染","中\n度\n污\n染","重\n度\n污\n染","严\n重\n污\n染"]

四、将x轴上的日期对应到每个刻度节点上

只需加上 boundaryGap 为 false 即可，如下图的效果

xAxis: {
   type: 'category',
   boundaryGap: false
}

五、在图标中鼠标移动上去显示相关数据

option = {
    backgroundColor: "#000",
    tooltip: { // 展示数据
      trigger: 'axis'
    },
    ......

    series: [
      {
        name: "空气质量", // 数据名
        ......
      }
    ]
}

六、为图表加上多组折线图数据

series: [
  {
    name: "A地区空气质量",
    type: 'line',
    data: [10, 230, 329, 128, 135, 180, 50]
  },
  {
    name: "B地区空气质量",
    type: 'line',
    data: [150, 230, 224, 218, 135, 147, 260],
    ......
  },
  ......
]

七、调整一下上下左右边距，修改 grid 属性即可

option = {
  backgroundColor: "#000",
  grid: {
    top: 8,
    left: 30,
    right: 25,
    bottom: 40
  },
  ......
}

八、设置html和css相关内容，将js引入html并展示

html：

<body>

       <div class="kongqi"></div>

</body>

css：展示echarts所在标签需要设置宽高

<style>

.kongqi{

            width: 5.5rem;

            height: 5rem;

            margin: 0.195rem;

            background:#787a9c;

            overflow: hidden;

            display: inline-block;

        }

</style>

js：

<script src="js/jquery.js"></script>  // 引入jquery.js文件

<script src="js/echarts.min.js"></script> // 引入echarts.js文件

(function () {

  // 1实例化对象
  var myChart = echarts.init(document.querySelector(".kongqi"));

  // 2. 指定配置项和数据
  option = {
    backgroundColor: "#000",
    ......
  };

  // 3. 把配置项给实例对象
  myChart.setOption(option);

  // 4. 轮播动效
  animation(myChart);

  // 5. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });

})();

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~