参考官网教程: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配置项