一、使用步骤
1.引入 echarts
（1）在script引入
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
（2）命令引入
npm i echarts
//或者
yarn add echarts
在main.js全局引入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.准备一个具备大小的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化 echarts 实例对象
//this.$echarts.init(document.getElementById('main')).dispose(); //销毁前一个实例
var myChart = this.$echarts.init(document.getElementById('main'))
4.指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5.将配置项设置给 echarts 实例对象
myChart.setOption(option)
二、Echarts-基础配置
需要了解的主要配置title legend tooltip grid color xAxis yAxis series dataZoom
title：标题组件，包含主标题和副标题
legend：图例组件,展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列不显示
tooltip：提示框组件
grid：直角坐标系内绘图网格
color：调色盘颜色列表。如果系列没有设置颜色，则会依次循环从默认列表中取颜色作为系列颜色
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series:系列列表。每个系列通过 type 决定自己的图表类型，bar:柱状图，line:折线图
dataZoom:x轴数据过长，使用滚动条
三、折线图图表根据需求定制
图表标题设置
- 居中显示标题和副标.
如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐 - 在
textStyle中设置标题居中显示、字体大小、颜色
title: {
text: '折线图',
top: '1%', //距离顶部距离
left: 'center', //标题居中
textStyle: {
align: 'center', //字体居中
color: '#fff', //字体颜色
fontSize: 20, //字体大小
},
},
图例组件设置
- 修改图例位置，可通过
top left right bottom更改 - 在
textStyle中设置图例颜色大小、背景颜色、边距圆角等
//图例组件配置
legend: {
top: "8%", //距离顶部位置
textStyle: {
color: "#4c9bfd", //图例文字颜色
fontSize: 14, //图例字体大小
padding: 3, //内边距
backgroundColor: 'rgba(0,0,0,.2)', //背景颜色
borderRadius: 3 //圆角
}
},
tooltip提示框配置
- 鼠标悬浮显示的内容状态
- 可简单配置，当前配置了提示时的数线条样式
- 当使用
trigger:'axis'且不配置formatter到时候，弹框内可以显示所有类别的数据 - 当配置了
formatter: '{b}{c}',则弹框只显示鼠标触发点的已配置的数据 - 折线图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
tooltip: {
//axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
//item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
trigger: 'axis',
axisPointer: {
type: 'line', //line: 直线指示器 shadow:阴影指示器 cross:十字准星指示器
lineStyle: { //axisPointer.type 为 'line' 时有效
color: {
type: 'linear', //linear:线性渐变 radial:径向渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, // 0% 处的颜色
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1, // 100% 处的颜色
color: 'rgba(0, 255, 233,0)'
}],
global: false // 缺省为 false
}
},
},
// 提示框浮层内容格式器
//formatter: '{a} <br/>{b} : {c} 元'
},
grid绘图网格配置
- 可配置网格的所处的位置
grid: {
top: '20%',
left: '5%',
right: '2%',
bottom: '10%',
containLabel: false, //grid 区域是否包含坐标轴的刻度标签
},
X 轴相关设置 xAxis
-
axisLine可配置x轴是否显示、颜色、宽度、虚线 -
axisLabelx轴刻度标签的相关设置 -
splitLinex轴分割线样式 -
axisTick坐标轴刻度配置 -
data可配置x轴类目
//X轴配置
xAxis: [{
type: 'category',
show: true, //false:刻度、类目都不显示
//x轴线配置
axisLine: {
show: true, //false: 只是x轴线不显示
lineStyle: {
color: 'rgba(255,255,255,0.2)', //x轴线颜色
width: 1, //宽度
type: 'solid', //solid：实线 dashed：虚线 dotted:虚点
}
},
//x轴刻度标签的相关设置
axisLabel: {
color: '#fff',
fontSize: 12, //文字大小 不加单位
},
//x轴分割线样式
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)' //y轴分割线颜色
}
},
//坐标轴刻度配置
axisTick: {
show: false, //是否显示
},
//坐标轴两边留白策略
boundaryGap: true, //true:距离Y轴有距离，false：从Y轴起始
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
X轴过长实现滚动条dataZoom
-
type:'slider'显示滚动条，可以使用滚动条拖动 -
type:'inside'无滚动条，在屏幕拖动滑动 -
left、bottom滚动条位置 -
start滚动条起始位置 -
end滚动条截至位置（按比例分割你的柱状图x轴长度）
// x轴滚动
dataZoom: [{
type: 'slider', //显示滚动条，可以使用滚动条拖动；'inside'：无滚动条，在屏幕拖动滑动
show: true, //flase直接隐藏图形
filterMode: 'filter', //过滤数据后使另外的轴也能自动适应当前数据的范围,'none': 不过滤数据，只改变数轴范围
left: '10%', //滚动条靠左侧的百分比
right: '10%',
bottom: 0, //滚动条底部位置
start: 0, //滚动条的起始位置
end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
Y 轴相关定制yAxis
-
axisLiney轴线配置 -
splitLine分割线样式 -
axisLabely轴刻度标签配置 -
axisTick坐标轴刻度配置
//Y轴配置
yAxis: [{
type: 'value', //value:数值轴，适用于连续数据 category: 类目轴，适用于离散的类目数据
// min: 0,
// max: 140,
splitNumber: 4, //坐标轴的分割段数预估数
//分割线样式
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)' //y轴分割线颜色
}
},
//y轴线配置
axisLine: {
show: true, //y轴线是否显示
lineStyle: {
color: 'rgba(255,255,255,0.2)', //y轴线颜色
width: 1, //宽度
type: 'solid', //solid：实线 dashed：虚线 dotted:虚点
}
},
//y轴刻度标签配置
axisLabel: {
show: true, //是否显示
margin: 20, //与y轴边距
textStyle: {
color: '#d1e6eb', //刻度标签颜色
},
},
//坐标轴刻度配置
axisTick: {
show: false, //一般不显示
},
}],
series图标数据相关配置
- 折线平滑过渡
smooth:true -
itemStyle折线拐点标志的样式 -
lineStyle折线样式配置 -
label折线拐点文本标签 -
areaStyle分隔区域的样式设置，折线背景 -
stack数据堆叠，多条折线同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
series: [{
name: '销售金额',
type: 'line',
// smooth: true, //是否平滑过渡
showAllSymbol: true, // 如果 false 则只有在 tooltip hover 的时候显示
symbol: 'circle', //rect
symbolSize: 25, //折线拐点标志大小
//折线拐点标志的样式
itemStyle: {
color: "#deff8b", //填充色
borderColor: "#fff", //边框颜色
borderWidth: 3, //边框宽度
shadowColor: 'rgba(0, 0, 0, .3)', //阴影
shadowBlur: 0, //虚化
shadowOffsetY: 2, //阴影向下位移
shadowOffsetX: 2, //阴影向右位移
},
// 折线样式配置
lineStyle: {
normal: {
color: "#00ca95", //折线颜色
shadowColor: 'rgba(0, 0, 0, .3)', //阴影颜色
shadowBlur: 1, //阴影虚化
shadowOffsetY: 5, //阴影向下位移
shadowOffsetX: 5, //阴影向右位移
},
},
// 折线拐点文本标签
label: {
show: true, //显示
position: 'bottom', //文本标签位置
textStyle: {
color: '#00ca95', //文本标签字体颜色
}
},
tooltip: {
show: true
},
//分隔区域的样式设置，带背景,注释则不显示
areaStyle: {
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#eb64fb' // 0% 处的颜色
}, {
offset: 1,
color: '#3fbbff0d' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
//stack:'销售金额', //此演示只有一条数据，若是当前series数组中有多条数据中，
//可每条数据设置同样的stack值，届时折线图数据就会叠加，不会有交叉现象
data: [281.55, 398.35, 214.02, 119.55, 289.57, 356.14, 456],
}]
更换对应数据
// x轴中更换data数据
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// series 更换数据
data: [281.55, 398.35, 214.02, 119.55, 289.57, 356.14, 456],
让图表跟随屏幕自适应
window.addEventListener('resize', function() {
myChart.resize()
})
配置后
配置前
网友评论