【echarts】自定义样式

前言

最近接触的表格类型有：日历型calendar、水平和垂直柱状bar、饼状pie、折线line，有些典型效果和自定义样式，标签与轴间距、定义渐变色、混合类型、自定义类型等。主要学习路径以下：echarts官网文档，详细全面了解指定属性，可以实时展示属性功能效果；w3c上echarts文档，适合新手，目录清晰指定功能效果。

效果讲解

1. 自定义样式
   以日历为例，主要series.type.、calendar.itemStyle、calendar.dayLabel
   （1）series.type设置成cunstom,
   （2）series.renderItem返回值type为group（group 是唯一的可以有子节点的容器。group 可以用来设图形元素。）

			//顶部英文星期效果
            dayLabel: {
              firstDay: 1,
              nameMap: 'en', //英文
              width: 36,
              height: 36,
              align: 'center',
              lineHeight: 36,
              color: '#fff',
              fontSize: 13,
              backgroundColor: 'rgba(57, 123, 244, 0.5)',
              borderRadius: 18,
            },

        series: [
          {
            id: 'label',
            type: 'custom',
            coordinateSystem: 'calendar', // 坐标系类型
            colorBy: 'series',
            symbolSize(val) {
              return val[1] / 40;
            },
            renderItem(params: any, api: any) {
              const cellPoint = api.coord(api.value(0));
              // dataitem [2020-10-27', 240, 1]
              const value = api.value(2); //dataItem的第三维度的数值
              if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
                return;
              }
              return {
                type: 'group',
                x: cellPoint[0],
                y: cellPoint[1],
                children: [
                  {
                    type: 'rect',
                    shape: { //形状
                      x: -12,
                      y: -12,
                      width: 24,
                      height: 24,
                      r: [15],
                    },
                    style: api.style({
                      fill: colors[value],
                      stroke: stroke[value],
                      lineWidth: 6,
                    }),
                  },
                ],
              };
            },
            data: getVirtulData('2020'),
          },
        ],

2. 自定义颜色
   （1）color数组
   （2）series.itemStyle
   （3）渐变色
   colorStops和echarts.graphic.LinearGradient两种

          {
            name: 'Temperature',
            type: 'line', // 折线图
            lineStyle: {
              color: 'rgba(255, 0, 0, 0)',
            },
            areaStyle: { //渐变区域
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#FBD3CB', // 0% 处的颜色
                }, {
                  offset: 1, color: '#ffffff', // 100% 处的颜色
                }],
                global: false, // 缺省为 false
              },
            },
            zlevel: 1,
            data: virtulData2,
          },

      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },

3. 坐标轴指示器/指视线/标线axisPointer
   以折线图为例
   （1）trigger: ‘axis’
   注：position: 'top’鼠标所在图形上侧，只在 trigger 为’item’的时候有效。
   trigger 为 ‘axis’ 的时候，formatter会返回多维度数据
   （2）axisPointer

        tooltip: {
          trigger: 'axis', //适用类目轴的图表
          axisPointer: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#397BF4',
            },
          },
          // position: 'top',
          className: 'tip_box',
          borderColor: 'transparent',
          renderMode: 'html',
          formatter: (params: any) => {
            return `<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
                <div style="color:#4A4A4A;font-size: 10px;">2020年1月12日新增人数</div>
                <div style="color:#397BF4;font-size: 13px;font-weight: 600;">${params[0].data}人次</div>
            </div>`;
          },
        },

4. 自定义tooltip

renderMode: 'html',  //使得formatter识别dom标签
formatter: (params: any) => {
            return `<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
                <div style="color:#4A4A4A;font-size: 10px;">2020年1月12日新增人数</div>
                <div style="color:#FD643B;font-size: 13px;font-weight: 600;">${params?.data}人次</div>
            </div>`;
},

5. 间距
   （1）坐标轴间距interval
   （2）类目轴category设置标签间
   （3）标签和轴axisLabel

min: 0,
max: 25,
interval: 1, //坐标轴间距

		//类目轴category设置标签间
        grid: {
          top: 40,
          left: 29,
          right: 70,
          bottom: 40,
          containLabel: true, //防止标签溢出组件 
        },

//标签和轴间距
axisLabel: {
            margin: 16,
			//padding:24,
},

补充： 容器设置行内宽高，尽量避免使用百分比，如果·echarts 图没有撑满容器设置定位
style={{ width: ‘1169px’, height: ‘300px’，position: ‘absolute’, top: ‘0px’, bottom: ‘0px’ }}

总结

基本示例满足不了需求，掌握常用属性tooltip、dataset（多维度自定义数据）、grid、xAxis、 yAxis、series，以及按需引入写法，以上效果如有感兴趣可私信我，提供源码。