Vue使用Highcharts以及Echarts

准备工作

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

在vue里面引用Echarts，Highcharts

<template>
	<!-- <div class="visit"> -->
		<div id="test" :seriesData="seriesData"></div>
	<!-- </div> -->
</template>

<script>
	import HighCharts from 'highcharts';
	import highchartsMore from 'highcharts/highcharts-more';
	highchartsMore(HighCharts);
	export default {
		data() {
			return {
				id: 'test',
				option: {
					chart: {
						type: 'packedbubble',
						height: '100%'
					},
					title: {
						text: '' //表头文字
					},
					tooltip: {
						enabled : false
					},
					legend:{
						enabled : false
					},
					credits:{
						enabled : false
					},
				
					plotOptions: {
						packedbubble: {
							minSize: '40%',
							maxSize: '120%',
							zMin: 0,
							zMax: 1000,
							layoutAlgorithm: {
								splitSeries: false,
								gravitationalConstant: 0.02
							},
							dataLabels: {
								enabled: true,
								format: '{point.name}',
								filter: {
									property: 'y',
									operator: '>',
									value: 0
								},
								style: {
									color: 'black',
									textOutline: 'none',
									fontWeight: 'normal'
								}
							}
						}
					},
					series: this.seriesData
				}
			}
		},
		props: {
			seriesData: {
				default: ''
			}
		},
		mounted() {
			// this.option.series = this.seriesData;
			console.log(this.option.series);
            HighCharts.chart(this.id, this.option);
        },
		updated(){
			HighCharts.chart(this.id, this.option);
		}
	};
</script>

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

使用

<template>
	<div class="search">
		<Card>
			<Row type="flex" justify="start" class="code-row-bg">
				<div style="border-right:1px solid #ccc;width: 60%;margin-top: -1%;">
					<Col>
					<visite-pie1 :seriesData="seriesData"></visite-pie1>
					</Col>
				</div>

				<div style="width: 40%;"> 
					<Input type="text" v-model="search.keyword" clearable placeholder="请输入姓名或病历号" style="width: 300px;margin-left: 10%;margin-top: 30%;" />
					<wlink :to="{name:'case-case-list',query:{id:search}}">
						<Button style="margin-top: 30%;">搜索</Button>
					</wlink>
					<Row>
						<wlink :to="{name:'case-case-sift',query:{id:0}}">
							<Button style="margin-top: 20%;margin-left: 40%;" type="primary">高级筛选</Button>
						</wlink>
					</Row>
				</div>
			</Row>
		</Card>

	</div>
</template>

<script>
	import visitePie1 from "@/views/case/template/visitePie1";
	import util from "@/libs/util";
	export default {
		name: "count-manage",
		components: {
			visitePie1
		},
		data() {
			return {
				search:{
					keyword:''
				},
				seriesData:[],
				xData:[]
			};
		},
		methods: {
			getCoun