echarts中一些常用和不常用的属性配置

NM-BOY

已于 2024-07-01 12:56:24 修改

阅读量167

点赞数 3

文章标签： echarts javascript 前端

于 2024-07-01 12:46:28 首次发布

本文链接：https://blog.csdn.net/qq_42294411/article/details/140097177

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/echarts/dist/echarts.js"></script>
    <style>
      #root {
        --a: 50%;
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>
  </body>
  <script type="module">
    let echarts = window.echarts;
    let instance = echarts.init(document.getElementById("root"));
    console.log(instance);
    /**
     * 主要实现的功能是当type为line的,smooth为true的时候,展示所包括的面积并设置背景颜色
     */
    let xAxisData = [
      "Monday",
      "Tuesday",
      "wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday",
    ];

    let option = {
      xAxis: {
        type: "category",
        data: xAxisData,
        boundaryGap: false,
        splitLine: {
          show: true,
        },
        axisTick:{
          show:false
        }
      },
      yAxis: {
        type: "value",
        splitNumber: 10,
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
          },
        },
      },
      series: [
        {
          name: "新增用户",
          smooth: true,
          type: "line",
          data: [120, 200, 150, 80, 70, 110, 130],
          areaStyle: {
            opacity: 0.5,
          },
        },
      ],
      legend: {
        show: true,
      },
      tooltip: {
        trigger: "axis", //大多数情况下都是使用axis
        axisPointer: {
          type: "cross",
        },
        show: true,
      },
    };

    let xData = xAxisData.map((item) => {
      return item.length > 3 ? item.substr(0, 3) + "..." : item;
    });

    option.xAxis.data = xData;

    option.tooltip.formatter = function (params) {
      let result = params.map((item) => {
        return `${item.marker} ${item.seriesName} : ${item.data} <br/>`;
      });
      return `
         ${xAxisData[params[0].dataIndex]}<br/>
         ${result.join("")}
        `;
    };

    instance.setOption(option);

  </script>
</html>

1. xAxis和yAxis轴上都有的两个属性`axisLabel`,`axisTick`

2. xAxis上有一个`splitLine`属性,可以把图表背景设置成格子形状式的

xAxis: {
  type: "category",
  data: xAxisData,
  boundaryGap: false,
  splitLine: {
    show: true,
  },
  axisTick: {
  	show: false
  }
},

3. xAxis轴上有一个`boundaryGap`属性,它是一个用于设置坐标轴两边留白策略的属性。

xAxis: {
  type: "category",
  data: xAxisData,
  boundaryGap: false,
  splitLine: {
    show: true,
  }
},

4. yAxis有两个属性`splitNumber`,`splitArea`,可以设置行数和填充行的背景颜色

yAxis: {
 type: "value",
  splitNumber: 10,
  splitArea: {
    show: true,
    areaStyle: {
      color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
    },
  },
},

5. series的数组对象中有一个`areaStyle`属性,当`type`为`line`的时候,可以填充包裹起来的地方的背景颜色,可以设置一个opacity:0.5的透明度属性.

series: [
 {
    name: "新增用户",
    smooth: false,
    type: "line",
    data: [120, 200, 150, 80, 70, 110, 130],
    areaStyle: {
      opacity: 0.5,
    },
  },
],

6. tooltip中有一个`axisPointer`属性,可以设置鼠标悬浮展示的样式,里面有一个`type`属性可以设置`cross`

tooltip: {
 trigger: "axis", //大多数情况下都是使用axis
  axisPointer: {
    type: "cross",
  },
  show: true,
},

NM-BOY

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts中一些常用和不常用的属性配置

echarts中一些不常用但有实用效果的属性
复制链接

扫一扫

echarts中一些常用和不常用的属性配置

1. xAxis和yAxis轴上都有的两个属性axisLabel,axisTick

2. xAxis上有一个splitLine属性,可以把图表背景设置成格子形状式的

3. xAxis轴上有一个boundaryGap属性,它是一个用于设置坐标轴两边留白策略的属性。

4. yAxis有两个属性splitNumber,splitArea,可以设置行数和填充行的背景颜色

5. series的数组对象中有一个areaStyle属性,当type为line的时候,可以填充包裹起来的地方的背景颜色,可以设置一个opacity:0.5的透明度属性.

6. tooltip中有一个axisPointer属性,可以设置鼠标悬浮展示的样式,里面有一个type属性可以设置cross

1. xAxis和yAxis轴上都有的两个属性`axisLabel`,`axisTick`

2. xAxis上有一个`splitLine`属性,可以把图表背景设置成格子形状式的

3. xAxis轴上有一个`boundaryGap`属性,它是一个用于设置坐标轴两边留白策略的属性。

4. yAxis有两个属性`splitNumber`,`splitArea`,可以设置行数和填充行的背景颜色

5. series的数组对象中有一个`areaStyle`属性,当`type`为`line`的时候,可以填充包裹起来的地方的背景颜色,可以设置一个opacity:0.5的透明度属性.

6. tooltip中有一个`axisPointer`属性,可以设置鼠标悬浮展示的样式,里面有一个`type`属性可以设置`cross`