vue echarts日历散点图

原创已于 2023-03-08 16:26:14 修改 · 507 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

于 2023-03-07 13:15:02 首次发布

笔记专栏收录该内容

4 篇文章

订阅专栏

该文展示了如何在项目中按需引入ECharts库的特定组件，如CalendarComponent、TooltipComponent和EffectScatterChart。通过示例代码，配置了日历图表的样式，创建了一个基于日历的动态散点图，并提供了数据和链接，以实现特定的数据可视化效果。

效果图：

引入echarts

npm install echarts --save

这里是按需进行引入echarts的组件

import * as echarts from 'echarts/core';
import { CalendarComponent, TooltipComponent } from 'echarts/components';
import { EffectScatterChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  CalendarComponent,
  TooltipComponent,
  EffectScatterChart,
  CanvasRenderer,
  UniversalTransition
]);

代码

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

const graphData = [
  ['2017-02-01', 260],
  ['2017-02-04', 200],
  ['2017-02-09', 279],
  ['2017-02-13', 847],
  ['2017-02-18', 241],
  ['2017-02-23', 411],
  ['2017-02-27', 985]
];
const links = graphData.map(function (item, idx) {
  return {
    source: idx,
    target: idx + 1
  };
});
links.pop();
option = {
  tooltip: {
    position: 'top'
  },
  visualMap: [],
  calendar: [
    {
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff' //边框颜色
        }
      },
      itemStyle: {
        color: '#100C29', //背景色
        borderType: 'solid'
      },
      orient: 'vertical',
      yearLabel: {
        margin: 10
      },
      //标题'年'
      monthLabel: {
        nameMap: 'cn',
        margin: 10
      },
      dayLabel: {
        firstDay: 1,
        nameMap: ['日', '一', '二', '三', '四', '五', '六'],
        margin: 10
        // nameMap: 'cn'
        // color: '#fff' //字体颜色
      },
      left: 'center',
      top: 'middle',
      cellSize: [70, 70],//改变图的大小
      range: '2017-02'
    }
  ],
  series: [
    {
      type: 'effectScatter',
      color: '#C0464D', //改变散点颜色
      coordinateSystem: 'calendar',
      links: links,
      calendarIndex: 0,
      symbolSize: function (val) {
        return val[1] / 40;
      },
      data: graphData
    }
  ]
};

option && myChart.setOption(option);