echarts在vue中的使用

文章目录1.ECharts2.ECharts如何在vue中使用2.1从 npm 安装2.2 引入3.在组件中先显示一个简单的echarts图表4.如何将一个表格的数据用echarts图形显示出来？？？1.ECharts一个使用 JavaScript 实现的开源可视化库，包含了丰富功能的图表，还可以自定义图表。详细了解可去ECharts官网 ECharts官网链接2.ECharts如何在vue...

易心i

7031人浏览 · 2019-11-05 14:01:59

易心i · 2019-11-05 14:01:59 发布

文章目录

1.ECharts
2.ECharts如何在vue中使用
- 2.1从 npm 安装
- 2.2 引入
3.在组件中先显示一个简单的echarts图表
4.如何将一个表格的数据用echarts图形显示出来？？？

1.ECharts

一个使用 JavaScript 实现的开源可视化库，包含了丰富功能的图表，还可以自定义图表。详细了解可去ECharts官网 ECharts官网链接

2.ECharts如何在vue中使用

2.1从 npm 安装

npm install echarts

2.2 引入

在main.js中全局引入（全局引入占用的体积会大一些，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块，直接在组件中引入。）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

也可以直接在组件中引用

var echarts = require('echarts');

3.在组件中先显示一个简单的echarts图表

char.vue

<template>
		<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script>
	export default {

		data() {
			return {
			};
		},
		methods: {

			drawChart() {
				//基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('main'));

// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
           
			}
		},
 		mounted() {
			this.drawChart();
		},
		
	};
</script>

<style>

</style>

在这里插入图片描述

4.如何将一个表格的数据用echarts图形显示出来？？？

在这里插入图片描述
其实，从上面的图表可以看出，只要把划黄线的这个数据，变成表格中的数据即可

在这里插入图片描述
具体代码如下 echarts.vue

<template>

	<div id="app">
		<br />
		<div align="center">
			<el-table border stripe size="big" :data="listData" style="width: 90%" align="right">
				<el-table-column type="index" width="100" label="编号">
				</el-table-column>
				<el-table-column prop="odr_customer" label="客户名称" min-width="1">
				</el-table-column>
				<el-table-column label="订单金额(元)" min-width="1">
					<template slot-scope="scope">
						{{scope.row.odd_count*scope.row.odd_price}}
					</template>

				</el-table-column>

			</el-table>

		</div><br />
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</template>
<script>
	export default {

		data() {
			return {
				name: "app",
				listData: [],
				id: [],
				data: [],
				sum: '',
			

			};
		},
		methods: {


			drawChart() {
				let url = this.axios.urls.SYSTEM_ORDERS_LIST2;
				this.axios.post(url, {}).then((response) => {
					this.listData = response.data.data;

					for (let i = 0; i < this.listData.length; i++) {

						this.id.push(this.listData[i].odr_customer);
						this.sum = this.listData[i].odd_count * this.listData[i].odd_price
						this.data.push(this.sum);
					
					}
				
            // 为echarts对象加载数据
            myChart.setOption(option);
					// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById("main"));
					// 指定图表的配置项和数据
					let option = {
						title: {
						text: "ECharts 入门示例"
 						},
					tooltip: {},
					legend: {
							data: ["销量"]
 						},
						xAxis: {
							data: this.id
						},
 						yAxis: {},
 						series: [{
						name: "销量",
						type: "bar",
							data: this.data
					}]
					// };
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				console.log(response);
				}).catch(function(error) {
					console.log(error);
				});

			}
		},

		created() {
			this.drawChart();
		}
	};
</script>

<style>

</style>

主要变化的地方
在这里插入图片描述
最后效果如下
①柱形图

如果不想用柱形图表示的话，可以去官网中的实例看，有很多选择（主要改一下option中的属性即可）

下面用扇形图

主要改一下option中的属性即可，只是data数据格式变了（ data:[{value：‘百度’，name：‘44’}]），所以在获取这个data数据时要稍微变一下
this.arr.push({
value: this.listData[i].odd_count * this.listData[i].odd_price,
name: this.listData[i].odr_customer
})

②扇形图

在这里插入图片描述

<script>
	export default {

		data() {
			return {
				name: "app",
				listData: [],
				arr: [],
				customer: []

			};
		},
		methods: {
	
			drawChart() {
				let url = this.axios.urls.SYSTEM_ORDERS_LIST2;
				this.axios.post(url, {}).then((response) => {
					this.listData = response.data.data;

					for (let i = 0; i < this.listData.length; i++) {
						this.arr.push({
							value: this.listData[i].odd_count * this.listData[i].odd_price,
							name: this.listData[i].odr_customer
						})
						this.customer.push(this.listData[i].odr_customer)
					}
					let myChart = this.$echarts.init(document.getElementById("main"));
					let option = {
						title: {
							text: '客户贡献', //标题
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b}: {c} ({d}%)"
						},
						color: ['#31b0d5', 'pink', 'green', 'purple', 'yellow'],
						legend: {
							type: 'scroll',
							orient: 'vertical',
							right:0,
							top: 20,
							bottom: 20,
							data: this.customer
						},
						series: [{
							name: '客户贡献',
							type: 'pie',
							radius: '55%',
							itemStyle: {
								normal: {
									label: {
										show: true,
										formatter: "{b}:  ({d}%)", //显示标签
									},
									labelLine: {
										show: true, //显示标签线
										// length:10
									},

									borderWidth: 2, //设置border的宽度有多大
									borderColor: '#fff',
								},
							},
							data: this.arr
						}]
					};
					// 为echarts对象加载数据
					myChart.setOption(option);
					
			}
		},

		created() {
			this.drawChart();
		}
	};
</script>

③南丁格尔图
在这里插入图片描述
这种图形和上面的扇形差不多，只是option里面的属性不同，data的数据格式也是一样的

let option = {
						backgroundColor: '#E6F1FE',

						title: {
							text: '客户贡献',
							left: 'center',
							top: 20,
							textStyle: {
								color: 'black'
							}
						},

						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},

						visualMap: {
							show: false,
							min: 80,
							max: 600,
							inRange: {
								colorLightness: [0, 1]
							}
						},
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: '55%',
							center: ['50%', '50%'],
							data: this.arr,
							roseType: 'radius',
							label: {
								normal: {
									textStyle: {
										color: 'black'
									}
								}
							},
							labelLine: {
								normal: {
									lineStyle: {
										color: 'black'
									},
									smooth: 0.2,
									length: 10,
									length2: 20
								}
							},
							itemStyle: {
								normal: {
									color: '#E6F1FE',
									shadowBlur: 200,
									shadowColor: '#E6F1FE'
								}
							},

							animationType: 'scale',
							animationEasing: 'elasticOut',
							animationDelay: function(idx) {
								return Math.random() * 200;
							}
						}]
					}

总结：当我们使用echarts时，只用弄清它的数据的格式，然后把从后台获得的数据转化成与它匹配的数据格式即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^