Echarts在线免费图表

 
            let data = [
	[5, -160, 0],
	[8, 350, 1],
	[12, -380, 0]
]
let xData = []

const symbolSize = 20;

let otherFormData = {
	leftMax: 1500,
	leftMin: -1500,
	rightMax: 600,
	rightMin: -600,
}
let month = new Date().getMonth() + 1
let year = new Date().getFullYear()
for (let i = 0; i < 18; i++) {
	xData.push(year + '-' + (month > 9 ? month : '0' + month))
	if (month == 12) {
		year++
		month = 1
	} else {
		month++
	}
}

const ratio = (otherFormData.leftMax - otherFormData.leftMin) / (otherFormData.rightMax - otherFormData.rightMin);
option = {
   backgroundColor: '#fff',
	tooltip: {
		triggerOn: 'none',
		confine: true,
		axisPointer: {
			type: 'cross'
		},
		position: function(point, params, dom, rect, size) {
			return [point[0] + 20, point[1]]
		},
		formatter: function(params) {
			return (
				'时间: ' +
				xData[params.data[0]] +
				'<br>' + ['支出', '收入'][params.data[2]] +
				'<br>金额: ' +
				Math.abs(params.data[1]) + '万元'
			);
		}
	},
	grid: {
		top: 55,
		left: 50,
		right: 50,
		bottom: 50
	},
	xAxis: {
		id: 'xAxis',
		data: xData,
		axisLabel: {
			rotate: 45
		},
	},
	yAxis: [{
			id: 'left',
			axisLine: {
				show: true
			},
			name: '万元',
			type: 'value',
			max: otherFormData.leftMax,
			min: otherFormData.leftMin,
		},
		{
			id: 'right',
			show: true,
			name: '万元',
			type: 'value',
			axisLine: {
				show: true
			},
			max: otherFormData.rightMax,
			min: otherFormData.rightMin,
		},

	],
	series: [{
			id: 'a',
			type: 'line',
			yAxisIndex: 1,
			symbolSize: symbolSize,
			colorBy: '#fffffff',
			data: data,
			lineStyle: {
				color: "transparent"
			}
		},
		{
			id: 'b',
			type: 'bar',
			yAxisIndex: 1,
			data: data,
			barWidth: symbolSize,
			itemStyle: {
				normal: {
					color: function(params) {
						let colorList = [
							'#D7504B', '#328C3B'
						];
						return colorList[params.data[2]]
					},
				}
			}
		},
	]
}
myChart.setOption(option)
setGraphic()

function setGraphic() {
	const graphic = data.map(function(item, dataIndex) {
		return {
			type: 'circle',
			position: myChart.convertToPixel({
				xAxisId: 'xAxis',
				yAxisId: "right"
			}, item),
			shape: {
				cx: 0,
				cy: 0,
				r: symbolSize / 2
			},
			//表示节点不显示
			invisible: true,
			//可拖拽
			draggable: true,
			style: {
				fill: "#666"
			},
			ondrag: function(el) {
				onPointDragging(dataIndex, [el.offsetX, el.offsetY], 'ondrag', item);
			},
			onmouseover: function() {
				showTooltip(dataIndex);
			},
			onmousemove: function() {
				showTooltip(dataIndex);
			},
			ondragend: function(el) {
				onPointDragging(dataIndex, [el.offsetX, el.offsetY], 'ondragend', item);
			},
			onmouseout: function() {
				hideTooltip(dataIndex);
			},
			z: 100
		};
	})
	myChart.setOption({
		graphic: graphic
	});
}

function showTooltip(dataIndex) {
	myChart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: dataIndex
	});
}

function hideTooltip(dataIndex) {
	myChart.dispatchAction({
		type: 'hideTip'
	});
}

function onPointDragging(dataIndex, pos, type, item) {
	if (myChart.convertFromPixel({
			xAxisId: 'xAxis',
			yAxisId: "right"
		}, pos)[0] < 0 || myChart.convertFromPixel({
			xAxisId: 'xAxis',
			yAxisId: "right"
		}, pos)[0] > 18) {
		setGraphic()
		return
	}
	let yData = myChart.convertFromPixel({
		xAxisId: 'xAxis',
		yAxisId: "right"
	}, pos)[1]
	if (type == 'ondragend') {
		if (item[2] === 0) { //支出
			if (myChart.convertFromPixel({
					xAxisId: 'xAxis',
					yAxisId: "right"
				}, pos)[1] > 0) {
				yData = 0
				console.log('支出最少为0元')
			}
		} else {
			if (myChart.convertFromPixel({
					xAxisId: 'xAxis',
					yAxisId: "right"
				}, pos)[1] < 0) {
				yData = 0
				console.log('收入最少为0元')

			}
		}
	}
	data[dataIndex] = [myChart.convertFromPixel({
		xAxisId: 'xAxis',
		yAxisId: "right"
	}, pos)[0], parseInt(yData), data[dataIndex][2]]
	myChart.setOption({
		series: [{
				id: 'a',
				data: data
			},
			{
				id: 'b',
				data: data
			}
		]
	});
	if (type == 'ondragend')
		setGraphic()
}