效果图:
引入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);