Vue使用Highcharts以及Echarts

准备工作

首先安装Echarts，Highcharts；这里我就不做讲解了，网上的教程实在是太多。如果不懂vue也没关系，我也没学过vue，容易踩坑。本篇文章Highcharts已气泡图来讲解，话不多说直接上代码

在vue里面引用Echarts，Highcharts

template定义一个模版，方便其他需要图表的页面使用。
import highchartsMore from ‘highcharts/highcharts-more’;
highchartsMore(HighCharts);
这两行代码要有，不然可能会出现找不到highcharts的错误
:seriesData="seriesData"就是数据源了，最后HighCharts.chart(this.id, this.option);即可；updated()方法是为了数据改变是重新渲染图标

使用

这里要注意的就是数据格式问题了

效果图

Echarts使用

<template>
	<div class="visit">
		<p style="margin-top: -10px;font-size: 15px;">
			<span>
				{{this.title}}
			</span>
		</p>
		<div style="width:100%;height:195px;" align="center" :datap="datap" :id="'visite_volume_con'+id"></div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	export default {
		name: 'visiteVolume',
		data() {
			return {
				date: "1",
				option: {
					// color: ['#4472C5', '#ED7C30', '#80FF80', '#FF8096', '#800080','##4472C5'], //配置颜色
					tooltip: {
						trigger: 'item',
						axisPointer: {
							type: 'shadow'
						},
						formatter: "{b} : {c}人 ({d}%)"
					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					series: [

					]
				}
			};
		},
		props: {
			type: {
				default: 'bar'
			},
			id: {
				default: '0'
			},
			datap: {
				default: ''
			},
			title: {
				default: '图表名称'
			}
		},
		methods: {
			getAttendanceData() {
				this.$nextTick(() => {
						let visiteVolume = echarts.init(document.getElementById('visite_volume_con' + this.id));

						if (this.id == '3') {
							this.option.series = {
								itemStyle: {
									normal: {
										label: {
											show: true,
											// formatter: '{b}'
										},
										labelLine: {
											show: true
										}
									},
								},
									radius: ["30%", "70%"],
									// name: '疾病名称',
									type: this.type,
									data: this.datap
								};
							}
							else {
								this.option.series = {
									// radius: ["40%", "60%"],
									type: this.type,
									data: this.datap
								};
							}
							visiteVolume.setOption(this.option);

							window.addEventListener('resize', function() {
								visiteVolume.resize();
							});

						});
				}
			},
			mounted() {
				this.getAttendanceData();
			},
			updated() {
				this.getAttendanceData();
			}

		};
</script>

定义模版，饼状图以及环形图。:datap="datap"数据源。使用的话就跟Highcharts差不多了

效果图

结束

参考https://www.highcharts.com.cn/demo/highcharts/packed-bubble
https://www.echartsjs.com/examples/#chart-type-line
有什么问题可以直接评论