vue功能 -- ECharts数据可视化 -- 图表

ECharts官网

快速入手

官方基础表格案例

在vue中引入

npm install echarts --save

在main.js中全局引入

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts

使用案例

需要有一个图表显示区域

<div>
	<h1>数据可视化</h1>
	<div id="main" style="width: 600px; height: 400px"></div>
	<div id="chart" style="width: 600px; height: 400px"></div>
</div>

创建和显示图表

<script>
export default {
	methods: {
		myData() {
			let myChart = this.$echarts.init(document.getElementById("main"));
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: "ECharts 入门示例",
				},
				tooltip: {},
				legend: {
					data: ["销量", "库存"],
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
				},
				yAxis: {},
				series: [
					{
						name: "销量",
						type: "bar",
						data: [5, 20, 36, 10, 10, 20],
					},
					{
						name: "库存",
						type: "bar",
						data: [10, 30, 46, 20, 20, 30],
					},
				],
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		mydatachart() {
			let myChart = this.$echarts.init(document.getElementById("chart"));
			let option = {
				xAxis: {
					type: "category",
					data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: "line",
					},
				],
			};

			myChart.setOption(option);
		},
	},
	mounted() {
		this.myData();
		this.mydatachart();
	},
};
</script>

 效果