echarts的常用配置

最新推荐文章于 2024-06-20 09:30:03 发布

智慧女孩不秃啊

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量313

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_44443821/article/details/130040143

版权

最近在做大屏数据可视化方面，总结一下echarts的常用的一些配置。

图表标题的相关配置：

 title: {
          show: true, //boolean  是否显示标题组件
          text: '主标题文本', //支持使用\n换行
          link: '', //主标题文本超链接
          //主标题文字设置
          textStyle: {
            color: 'red', //标题颜色
            fontSize: '22', //标题字体大小
            fontStyle: 'normal', //'normal'  'italic'斜体 'oblique（倾斜）'  文字字体风格
            // 。。。
            label: {
              // 在文本中，可以对部分文本采用 rich 中定义样式。
              // 这里需要在文本中使用标记符号：
              // `{styleName|text content text content}` 标记样式名。
              // 注意，换行仍是使用 '\n'。
              formatter: [
                '{a|这段文本采用样式a}',
                '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}',
              ].join('\n'),

              rich: {
                a: {
                  color: 'red',
                  lineHeight: 10,
                },
                b: {
                  backgroundColor: {
                    image: 'xxx/xxx.jpg',
                  },
                  height: 40,
                },
                x: {
                  fontSize: 18,
                  fontFamily: 'Microsoft YaHei',
                  borderColor: '#449933',
                  borderRadius: 4,
                },
              },
            },
          },
          // 副标题
          subtext: '副标题',
          x: '标题位置',

          //副标题文字样式配置
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
            //...
          },
          itemGap: 10,//主标题和副标题之间的间距
          z: 2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
          left:''//可是是20具体像素值 或者20% 百分比 也可以是center  bottom等
        },

图例的相关配置：

  legend: {
          left: '', //离左侧容器的距离  left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
          //如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐
          width: 'auto', //组件宽度默认自适应
          itemWidth: '', //图例标记的图形宽度
          orient: 'horizontal', //横向排放   ’vertical‘纵向排放
          itemGap: 10, //图例之间的间隔，横向排放时是横向间隔，纵向排放时是纵向间隔
          //图例的图形样式
          itemStyle: {},
          //图例图形中线的样式
          lineStyle: {},
          symbolRotate: 'inherit', // 图形旋转角度
          //格式化图例文本
          formatter: function (name) {
            return 'Legend ' + name
          },
          //图例的公用文本样式
          textStyle: {},
          icon: '', //图例项的icon 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          //图例的数据数组
          data: [
            {
              name: '系列1',
              // 强制设置图形为圆。
              icon: 'circle',
              // 设置文本为红色
              textStyle: {
                color: 'red',
              },
            },
          ],
        },