echarts部分属性使用

 

1. 标题部分 (title): 控制图表的标题显示，包括主标题和副标题。你可以设置标题的文字内容、样式、位置等属性。

2. 图例部分 (legend): 图例是用来标识每个系列的名称的，可以让用户通过点击图例来控制显示/隐藏对应的数据系列。

3. 提示框部分 (tooltip): 当鼠标悬停在数据项上时，会弹出提示框显示相关的数据信息。

4. X 轴部分 (xAxis): 控制 X 轴的显示，包括刻度、标签等属性。在这里设置了 X 轴的数据以及一些样式。

5. Y 轴部分 (yAxis): 控制 Y 轴的显示，与 X 轴类似，但在这里没有设置特定的属性。

6. 数据系列 (series): 这里定义了柱状图的数据系列，每个系列对应一个柱状图的条形。每个系列包括名称、类型（这里是柱状图）、数据等属性。

这段代码中的配置选项可以用来生成一个带有标题、图例、提示框和柱状图数据的简单图表。

<template>

  <div>

    <div ref="idRef" style="width:400px;height:300px"></div>

  </div>

</template>

<script>

import * as echarts from "echarts";

export default {

  components: {

  },

  data() {

    return {

    };

  },

  mounted() {

    this.getInitEcharts();

  },

  created() {

  },

  methods: {

    getInitEcharts() {

      var myChart = echarts.init(this.$refs.idRef)

      let option = {

        title: {

          show: true,

          // text: "{a|Main Title}",

          // subtext: "Sub Title",

          // link: 'aa',

          // 当前窗口打开超链接seft,'blank' 新窗口打开

          target: 'self',

          textAlign: 'left',

          // 用于配置标题文本是否触发事件

          triggerEvent: true,

          // 主副标题之间的间距。

          itemGap: 100,

          padding: [

            10,  // 上

            5, // 右

            5,  // 下

            10, // 左

          ],

          borderRadius: 5,

          textStyle: {

            color: '#ccc',

            fontStyle: 'oblique',

            fontWeight: 'bold',

            fontFamily: 'Arial',

            fontSize: 18,

            lineHeight: 30,

            textBorderColor: "blue",

            // 描边宽度

            textBorderWidth: 5,

            // 描边类型

            textBorderType: 'dashed',

            // 用于设置虚线的偏移量

            textBorderDashOffset: 30,

            // 文字本身的阴影颜色。

            textShadowOffsetX: 1,

            width: 50,

            // 文字超出宽度是否截断或者换行'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...'break' 换行'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行

            overflow: 'truncate',

            ellipsis: '...',

            rich: {

              a: {

                color: 'yellow',

                fontSize: 20,

                fontWeight: 'bold'

              },

              b: {

                color: 'blue',

                fontStyle: 'italic'

              }

            }

          },

          subtextStyle: {

            fontSize: 20

          }

        },

        legend: {

          // 'plain'：普通图例。缺省就是普通图例。

          // 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

          data: [

            '图',

            '图2',

            '图3',

            '图4',

            '图5',

            '图6',

            '图7'

          ],

          type: 'scroll',

          // 设置scoll时,设置scrollDataIndex可以指定当前legend显示的位置

          scrollDataIndex: 0,

          // 按钮和页信息之间的间隔。

          pageButtonItemGap: 10,

          // 图例控制块和图例项之间的间隔。

          pageButtonGap: 10,

          // 控制下一页的显示在左侧还是右侧'start','end'

          pageButtonPosition: 'end',

          pageIcons: {

            // horizontal: ['arrow-left', 'arrow-right'], // 设置水平方向翻页按钮图标

            vertical: ['image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7', 'arrow-down'] // 设置垂直方向翻页按钮图标

          },

          id: 'myLegend',

        },

        tooltip: {

        },

        xAxis: {

          data: ['1', '2', '3', '4', '5'],

          // x轴线

          axisLine: {

            symbol: 'arrow',

            lineStyle: {

              type: 'dashed'

              // ...

            }

          },

          // x刻度

          axisTick: {

            length: 5,

            lineStyle: {

              type: 'dashed'

              // ...

            }

          },

          // 刻度标签

          axisLabel: {

            formatter: '{value}kg',

            align: 'center'

            // ...

          }

        },

        yAxis: {

        },

        series: [

          {

            name: '图',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图2',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图3',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图4',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图5',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图6',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          },

          {

            name: '图7',

            type: 'bar',

            data: [2, 5, 9, 10, 22]

          }

        ]

      }

      myChart.setOption(option)

      // 当页面的宽度为百分比的时候使用,自适应

      window.onresize = function () {

        myChart.resize();

      };

      myChart.on('click', function (params) {

        console.log(params, 'lllll')

        if (params.componentType === 'title') {

          console.log('点击了标题文本：' + params.event.target.style.text);

        }

      });

      // 显示加载动画，当请求接口时，进行调用，接口返回数据时候隐藏。

      setTimeout(() => {

        myChart.showLoading({

          text: '正在加载数据...',

          // 图标颜色

          color: 'red',

          textColor: 'blue',

          // 背景遮罩颜色

          maskColor: 'rgba(255, 255, 255, 0.8)',

          zlevel: 0

        });

      },0)

      // 隐藏加载动画

      setTimeout(()=>{

        myChart.hideLoading();

      },500)

    }

  },

};

</script>

<style lang="scss" scoped></style>