vue echarts日历散点图

效果图:

引入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);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值