学习echarts(一)

最新推荐文章于 2024-06-19 16:17:57 发布

何以为皇

最新推荐文章于 2024-06-19 16:17:57 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qq_39352650/article/details/107564234

版权

参考官网教程：https://echarts.apache.org/zh/tutorial.html

一、使用：

使用命令安装到项目 npm install echarts --save
引入echarts import echarts from "echarts";
准备一个具备高宽的 DOM 容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

绘制一个柱状图

<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

效果如下柱状图

二、基本概念介绍：

系列（series）：在 echarts 里，series是指一组数值以及他们映射成的图，一个 series包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
这里简单介绍三种图表类型：line（折线图）、bar（柱状图）、pie（饼图）
组件(component)：整个echarts图标分为许许多多的组件组成，其中至少包括xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板），一下是官网上的一张组件图，供参考了解

三、代码实现

实现一个天气预报折线图。

<template>
	<!--1. 为echarts准备一个具备大小的容器dom-->
	<div ref="lineBox" style="width: 800px;height: 500px;"></div>
</template>
<script>
//2. 引入echarts
import echarts from 'echarts'
export default {
	name: "Line",
	data() {
		return {
			charts: '',
			// 系列中的数据内容数组，y轴显示的数据
			opinionData: ["31", "28", "34", "34", "25","40","18"]
		}
	},
	methods: {
		drawLine() {
			//3. 初始化echarts
			this.charts = echarts.init(this.$refs.lineBox)
			this.charts.setOption({
				color: ["#3398DB"],  //调色盘颜色列表,这里是折线的颜色 
				tooltip: {//提示框组件
					trigger: 'axis'  //触发类型，axis表示坐标轴触发，item数据项图形触发，none不触发
				},
				legend: {//解释、说明组件
					data: ["温度"] //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name，与series的name要一致
				},
				grid: {//直角坐标系底板组件
					left: '3%',   //左边距3%
					right: '3%',  //右边距3%
					bottom: '3%', //底部边距3%
					containLabel: true //grid 区域是否包含坐标轴的刻度标签。true表示包括了坐标轴标签在内的所有内容所形成的矩形的位置。
					},
				toolbox: {     //工具栏组件。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
					feature: { //各工具配置项。
						 magicType: {   //动态类型切换 
              				type: ["line","bar"], //切换为折线图和柱状图按钮
            			},
						saveAsImage: {}  //保存为图片
					}
				},
				xAxis: {   //直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
					type: 'category',  //坐标轴类型,'category'表示类目轴，适用于离散的类目数据；'value'表示数值轴，适用于连续数据；'time'表示时间轴，适用于连续的时序数据；'log'表示对数轴。适用于对数数据。
					boundaryGap: false, //坐标轴两边留白策略，false表示x坐标轴的每一项值不留白
					data: ["7-27","7-28","7-29","7-30","7-31",
					{value: "8-01",
					// 突出高温40度
					textStyle: {  //设置x轴的字体样式
                			fontSize: 20,
                			color: "red",
              			},
            		},"8-02"]  //类目数据，在类目轴（type: 'category'）中有效。x轴的数据，类型是数组，数组有几个值x轴就有几个数据
				},
				yAxis: {    //直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠
					type: 'value'  //坐标轴类型。'value' 数值轴，适用于连续数据；'category' 类目轴，适用于离散的类目数据；'time' 时间轴，适用于连续的时序数据；'log' 对数轴。适用于对数数据
				},
				series: [{    //系列列表。每个系列通过 type 决定自己的图表类型
					name: '温度',  //系列名称，用于tooltip的显示，legend 的图例筛选
					type: 'line',     //图形类型，line表示折线图
					data: this.opinionData  //系列中的数据内容数组。数组项通常为具体的数据项
				}]
			})
		}
	},
	//挂载钩子函数调用
	mounted() { 
		this.$nextTick(function() { //dom更新后再次执行
			this.drawLine()
		})
	}
}
</script>

展示效果：
在这里插入图片描述
今天就到这里了，具体更多的配置项可以参考：echarts配置项

何以为皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习echarts(一)

参考官网教程：https://echarts.apache.org/zh/tutorial.html一、使用：使用命令安装到项目 npm install echarts --save引入echarts import echarts from "echarts";准备一个具备高宽的 DOM 容器<body>  <div id="main" style="width: 600px;
复制链接

扫一扫