Краткое изложение некоторых советов и распространенных проблем при разработке визуализации данных Echarts

ECharts

В процессе разработки визуализации данных чаще всего используетсяEchartsБиблиотека диаграмм полностью бесплатна, код с открытым исходным кодом, и с ней легко начать работу. Документы и примеры относительно полны. Далее я поделюсь некоторыми из них.EchartsНесколько советов по использованию библиотеки диаграмм и краткое описание распространенных проблем. ОткрытьПримерстраницу, скопируйте код в поле редактирования слева, чтобы просмотреть эффект.

1. Текст координаты Y слишком длинный и заблокирован

Обходной путь: установитьgridэлемент конфигурацииleftПосле любого значения диаграмма рассчитает ширину оси Y и адаптируется

сетка: { left: 0, // расстояние от левой стороны контейнера right: 0, // расстояние от правой стороны контейнера внизу: "3%", сверху: "0", containsLabel: true // Содержит ли область сетки метки деления оси }

2. Метка оси X слишком длинная и отображение неполное.

Решение: угол поворота, отображение наклона или представление в виде многоточия.

xAxis: {
  axisLabel: {
    color: "#5e6877", // x轴字体颜色
    interval: 0, // 0 强制显示所有标签,默认auto
    rotate: 20 // 刻度标签旋转的角度
  }
}

// 省略号表示
xAxis: {
  axisLabel: {
	    formatter: function (value) {
	        if (value.length > 6) {
	            return value.substring(0, 6) + "...";
	        } else {
	            return value;
	        }
	    }
	}
}

3. Содержание легенды легенды слишком длинное и перекрывается с диаграммой.

Решение: отформатируйте новые строки

legend: {
  type: 'scroll', // 可滚动翻页的图例，当图例数量较多时可以使用
  orient: 'vertical',
  textStyle: {
      lineHeight: 20
  },
  formatter: function(sStr) { // 需要配合textStyle.lineHeight设置行高，不然换行后行间距太小
      var str = "";
      var l = 0;
      var schar;
      for (var i = 0; schar = sStr.charAt(i); i++) {
          str += schar;
          // /[^\x00-\xff]/ 匹配双字节字符，如中文、全角符号，其它单字节字符如字母、数字、半角符号
          l += schar.match(/[^\x00-\xff]/) ? 2 : 1;
          if (l > 10) {
              // 只有原字符串内容长度大于需要换行的长度临界点，才需要换行
              str += (sStr.length > str.length) ? '\n' : '';
              l = 0;
          }
      }
      return str;
  }
}

4. Когда всплывающая подсказка отображает много контента, она выходит за пределы экрана и отображение неполное.

Обходной путь: добавитьconfineАтрибуты

tooltip: {
    confine: true // 是否将 tooltip 框限制在图表区域内
}

5. Общее значение данных линейной диаграммы слишком велико, и диапазон отображения не очевиден.

Обходной путь: добавитьscaleсвойства, настройкиY轴не из0Начинать

yAxis: {
    type: 'value',
    scale: true // 按比例显示
}

6. На мобильной стороне много столбчатых диаграмм, и настраивается поворот экрана.

Обходной путь: добавьте поворот к этикетке контейнера.classстили (версия (4.8.0), отображается без проблем)

.horizontalScreen {
    transform: rotate(90deg);
    transform-origin: bottom left;
    position: absolute;
    top: -100vw;
    height: 100vw;
    width: 100vh;
    background-color:#FFF;
    z-index: 100;
}

7. Ширина гистограммы по умолчанию является адаптивной, что приводит к несогласованному отображению ширины нескольких данных и отдельных данных.

Решение: увеличитьbarMaxWidthсвойство, установите максимальное значение ширины

series: [
  {
  	type: 'bar',
	barMaxWidth: 30 // 可以是绝对值例如 40 或者百分数例如 '60%'，百分数基于自动计算出的每一类目的宽度。
  }
]

8. Адаптивное масштабирование диаграммы

Решение: прослушайте окно браузераresizeметод, вы можете добавить несколько диаграмм

window.addEventListener('resize', () => { 
    myChart.resize();  
    // myChart2.resize();  
    // myChart3.resize();
})

9. Слишком много контента на диаграмме, невозможно отобразить один экран или контейнер

Решение. Вы можете увеличить масштаб ползунка и прокрутку, а такжеdataZoomнастроить

dataZoom: [
  {
    show: true,
    startValue:  startOffset, // 数据窗口范围的起始数值
    endValue: endOffset // 数据窗口范围的结束数值
  },
  {
    type: 'inside'
  }
]

10. Легенда настроек радио

Решение: увеличитьselectedModeсвойство, установленное наsingle

legend: {
    data:[],
    selectedMode: 'single',
}

11. Реализуйте частичную пунктирную линию линейного графика.

Решение:seriesдва набора данныхnameтакой же,dataЧасть данных, реализация или незначащая часть пунктирной линии занимают место.

option = {
  xAxis: {
    type: 'category',
    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '产量',
    data: [820, 932, '', '', 930, 1200, 1000, 1110, '', ''],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 2
        }
      }
    }
  },
  {
    name: '产量',
    data: ['', 932, 800, 900, 930, '', '', 1110, 1200, 900],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 2,
          type: 'dashed'
        }
      }
    }
  }
  ]
};

在这里插入图片描述

12. Гистограммы перекрываются и отображаются пунктирными линиями.

Решение:barGapУказывает расстояние между столбцами разных серий, по умолчанию 30%, установивbarGapдля-100%Столбчатые диаграммы можно сделать перекрывающимися.

option = {
  xAxis: {
    data: ['a', 'b', 'c', 'd'],
    axisTick: { show: false }
  },
  yAxis: {
    splitLine: { show: false }
  },
  animationDurationUpdate: 1200,
  series: [{
    type: 'bar',
    itemStyle: {
      normal: {
        color: 'transparent',
        barBorderColor: 'tomato',
        barBorderWidth: 2,
        barBorderRadius: 0,
        borderType: "dotted"
      }
    },
    silent: true,
    barWidth: 40,
    barGap: '-100%', // 柱子重叠
    data: [60, 60, 60, 60]
  }, {
    type: 'bar',
    barWidth: 40,
    z: 10,
    data: [45, 60, 13, 25]
  }]
};

не установленbarGapКогда это так:在这里插入图片描述настраиватьbarGapдля-100%назад:在这里插入图片描述

13. Реализуйте отображение нескольких осей Y

Решение: датьyAxisОбъект устанавливает несколько групп массивов, представляющих различныеY轴;существуетseriesПри настройке в середине каждый элемент должен быть настроенyAxisIndex, не задавайте параметр, по умолчанию 0.

// 通过多Y轴，来实现多个维度对比来看数据的变化
var colors = ['#5793f3', '#d14a61', '#675bba'];
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['蒸发量', '降水量', '平均温度']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '蒸发量',
      min: 0,
      max: 250,
      position: 'right',
      axisLine: {
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '降水量',
      min: 0,
      max: 250,
      position: 'right',
      offset: 80,
      axisLine: {
        lineStyle: {
          color: colors[1]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '温度',
      min: 0,
      max: 25,
      position: 'left',
      axisLine: {
        lineStyle: {
          color: colors[2]
        }
      },
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '蒸发量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: '降水量',
      type: 'bar',
      yAxisIndex: 1,
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: '平均温度',
      type: 'line',
      yAxisIndex: 2,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

在这里插入图片描述

14. График нельзя перерендерить на старом контейнере

Решение: Во-первых, в официальной документации также есть инструкции, создайтеECharts实例,вернутьechartsInstance, не может инициализировать более одного в одном контейнереECharts实例.EchartsКаждый экземпляр создает уникальный на этикетке контейнераechartsInstance ID, который может поместить метку контейнера перед повторным рендерингом_echarts_instance_атрибут удален, зановоecharts.initавтоматически сгенерирует новыйechartsInstance ID, после чего диаграмма может отображаться нормально.

var chartEle = document.getElementById('chartId');
chartEle.removeAttribute('_echarts_instance_'); // 移除容器标签的 '_echarts_instance_' 实例属性，使用echarts.init重新生成一个新的实例ID
var myChart = echarts.init(chartEle);
myChart.setOption(option);

15. Добавьте клик для перехода на график

Решение:Echarts实例Вы можете добавить слушателей для событий мыши, включая «щелчок», «dblclick», «mousedown», «mousemove», «mouseup», «mouseover», «mouseout», «globalout», «contextmenu».

myChart.on('click', function(params) {
    window.open(params.data.url);
});

16. Добавьте водяной знак на график

Решение:Echarts实例Вы можете добавить отслеживание событий мыши, события мыши включают «щелчок», «dblclick», «mousedown», «mousemove», «mouseup», «mouseover», «mouseout», «globalout», «contextmenu».

// 在前端设置样式然后添加到背景中             
var waterMarkText = 'ECHARTS';  //水印名称
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');  //水印画布
canvas.width = canvas.height = 100;  //水印高宽
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.2; //水印透明度
ctx.font = '20px Microsoft Yahei';  //水印字体 
ctx.translate(50, 50);   //水印完整性
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);//水印显示情况

//在option中添加水印背景
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    backgroundColor: {
        type: 'pattern',
        image: canvas,
        repeat: 'no-repeat'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

在这里插入图片描述

17. Добавьте панель инструментов на диаграмму

Имеется пять встроенных инструментов для экспорта изображений, просмотра данных, динамического переключения типов, масштабирования области данных и сброса.

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true}, 
            dataZoom : {show: true}, // 区域缩放
            dataView : {show: true, readOnly: false}, // 数据预览
            magicType : {show: true, type: ['line', 'bar']}, // 切换类型
            restore : {show: true}, // 刷新
            saveAsImage : {show: true} // 保存
        }
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

Он будет обновляться, так что следите за обновлениями.

Категории