https://echarts.apache.org/examples/zh/editor.html?c=calendar-effectscatter
image.png

options

nameMap 设置多语言
https://echarts.apache.org/zh/option.html#calendar.dayLabel.nameMap

  1. import * as echarts from 'echarts/core';
  3. function getVirtualData(year) {
  4.   const date = +echarts.number.parseDate(`${year}-06-01`)
  5.   const end = +echarts.number.parseDate(`${year + 1}-12-31`)
  6.   const dayTime = 3600 * 24 * 1000;
  7.   const data = [];
  9.   for (let time = date; time < end; time += dayTime) {
  10.     data.push([
  11.       echarts.format.formatTime('yyyy-MM-dd', time),
  12.       Math.floor(Math.random() * 10000)
  13.     ])
  14.   }
  15.   // 数据格式就是 calendarData.json 二维数组
  16.   return data
  17. }
  19. export function getOption({data, length, theme}) {
  20.   const yearData = getVirtualData(2020)
  22.   return {
  23.     calendar: [
  24.       {
  25.         top: 56,
  26.         left: 56,
  27.         right: 24,
  28.         bottom: 24,
  29.         range: ['2020-06-01', '2020-12-31'],
  30.         splitLine: {
  31.           show: true,
  32.           lineStyle: {
  33.             color: 'rgb(127, 127, 127)'
  34.           }
  35.         },
  36.         yearLabel: {
  37.           formatter: '{start}',
  38.           nameMap: 'ZH',
  39.         },
  40.         dayLabel: {
  41.           color: 'rgb(127, 127, 127)',
  42.           fontSize: 18,
  43.           nameMap: 'ZH',
  44.         },
  45.         monthLabel: {
  46.           color: 'rgb(127, 127, 127)',
  47.           fontSize: 18,
  48.           nameMap: 'ZH',
  49.         },
  50.         itemStyle: {
  51.           color: 'rgb(48, 48, 48)',
  52.           borderWidth: 1,
  53.           borderColor: 'rgb(48, 48, 48)'
  54.         }
  55.       }
  56.     ],
  57.     series: [
  58.       {
  59.         name: '步数',
  60.         type: 'scatter',
  61.         coordinateSystem: 'calendar',
  62.         data: yearData,
  63.         symbolSize: (val) => {
  64.           return val[1] / 600
  65.         },
  66.         itemStyle: {
  67.           color: 'rgb(208,248,138)'
  68.         }
  69.       },
  70.       {
  71.         name: 'Top 12',
  72.         type: 'effectScatter',
  73.         coordinateSystem: 'calendar',
  74.         data: yearData.sort((a, b) => {
  75.           return b[1] - a[1]
  76.         }).slice(0, 12),
  77.         symbolSize: (val) => {
  78.           return val[1] / 500
  79.         },
  80.         showEffectOn: 'render',
  81.         rippleEffect: {
  82.           brushType: 'stroke'
  83.         },
  84.         hoverAnimation: true,
  85.         itemStyle: {
  86.           color: 'rgb(208,248,138)',
  87.           shadowBlur: 10,
  88.           shadowColor: '#333'
  89.         },
  90.         zlevel: 1
  91.       }
  92.     ],
  93.     legend: {
  94.       top: 8,
  95.       right: 24,
  96.       data: ['步数', 'Top 12'],
  97.       textStyle: {
  98.         color: 'rgba(0,0,0,.6)'
  99.       }
  100.     },
  101.     tooltip: {
  102.       trigger: 'item',
  103.       backgroundColor: 'rgba(50,50,50, .8)',
  104.       textStyle: {
  105.         fontSize: 24, color: '#ccc',
  106.       },
  107.       enterable: true,
  108.       extraCssText: 'max-height: 300px; overflow: auto;',
  109.     },
  110.   };
  111. }

locale 多语言

初始化设置多语言，默认为 ‘EN’，

  • 如果初始化没有设置，用到时，可以用 nameMap: ‘ZH’,

多语言参考 https://github.com/apache/echarts/tree/release/src/i18n

  1. echarts.init(current, null, {
  2.   renderer: renderType,
  3.   locale: 'ZH',
  4. });

image.png