echarts的简单使用

最新推荐文章于 2024-05-28 11:11:34 发布

终归墟

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量4.8k

点赞数 2

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/s_9527_s/article/details/123132946

版权

echarts官网Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html

一、echarts的引入

1、cdn引入

https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js

2、npm引入

npm install echarts

如果要使用3d类型的需要引入echarts-gl

npm install echarts-gl

下载完成后可以在package.json中查看

二、echarts的简单使用

1项目中的简单使用

（1）定义容器，并引入cdn

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#echar {
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!-- 显示图形的容器 -->
		<div id="echar"></div>
		<!-- 引入cdn -->
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>

（2）从官网查看自己所要使用的图表

（3）然后就可以在详情里看到详细的代码展示

（4）将代码复制，放到自己的js里就可以运行查看效果了

<!-- 显示图形的容器 -->
		<div id="echar"></div>
		<!-- 引入cdn -->
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>
		<script>
			var chartDom = document.getElementById('echar'); //获取容器
			var myChart = echarts.init(chartDom); //初始化
			var option; //数据
			option = {
				xAxis: { //x轴
					type: 'category',
					boundaryGap: false,
					data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
				},
				yAxis: {//y轴
					type: 'value',
					min:0,
					max:5,
					axisLabel:{
						formatter:function(val){
							var arr = []
							if (val == 0) {
								arr.push('无');
							} else if (val <= 1) {
								arr.push('低');
							} else if (val <= 2) {
								arr.push('中');
							} else if (val <= 3) {
								arr.push('高');
							} else if (val <= 4) {
								arr.push('困难');
							}  else {
								arr.push('地狱');
							}
							return arr
						}
					}
				},
				series: [ //空间内的数据
					{
						data: [3, 2, 5, 1, 2, 4, 1,3, 2, 3, 1, 2, 4, 1,3, 2, 3, 1, 2, 4, 1,4,2], //数据的点
						type: 'line' //线
					}
				]
				
			};
			myChart.setOption(option); //将数据绘制成图表展示

到这里就完成了简单的图表展示了

2、vue中的使用

（1）在main.js中引入

import Vue from 'vue'
import App from './App.vue'
//引入echarts
import * as echarts from 'echarts';
Vue.echarts = Vue.prototype.$echarts = echarts
//引入echarts-3d
import echartsGL from 'echarts-gl'
Vue.prototype.$echartsGL = echartsGL

（2）在vue文件中使用

.确定好容器的样式

<template>
	<div>
		<div id="echar"></div>
	</div>
</template>
<script>。。。</script>
<style scoped>
	#echar {
		width: 500px;
		height: 500px;
		border: 1px solid red;
	}
</style>

script

mounted() {
	this.playlines()
},
methods: {
playlines() {
	// 基于准备好的dom，初始化echarts实例
	var chartDom = document.getElementById('echar');
    var myChart = this.$echarts.init(chartDom);
	//多图数据切换防止数据并集出现，使用myChart.clear()清除原有数据
	myChart.clear()
	//绘制
	var option;
	option = {
		xAxis: {//x轴
			type: 'category',
			data: ['1', '2', '3', '4', '5', '6', '7','8','9']
		},
		yAxis: {//y轴
			type: 'value'
		},
		series: [{
			data: [150, 230, 224, 218, 135, 147, 260,220,140],//图表数据
			type: 'line'//线
		}]
	};
	myChart.setOption(option);
}
}

（3）运行项目即可看到效果

注：clear()方法可以清除容器！在做多个图切换的时候如果不清理容器会导致上个图表的数据残留，影响效果

三、结尾

echarts图表的熟练使用还是多写几个例子就熟悉了，关于不懂的方法可以在文档中查看，如果本文有不恰当或您不认同的地方，还请多多包涵，也欢迎您的指正！

终归墟

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
echarts的简单使用

echarts官网Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html一、echarts的引入1、cdn引入https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js2、npm引入npm install echar
复制链接

扫一扫