更多相关源码已经放进个人开源项目中：加我微获取
echarts折线图
1、介绍和安装
首先来看看官网的地址，我们可以进入echarts官网查看案例并且在线调试，这个功能真的非常的方便。
https://echarts.apache.org/zh/index.html
👉 安装
yarn add echarts
这里需要注意echarts4和echarts5 之间的一些配置还是不一样的
我本地的echarts版本是5
"echarts": "^5.5.0",
2、引入和使用
版本区别（引入方式不同）
这里需要注意的就是echarts版本4升级版本5，所采用的引入方式不同
❤版本4
import echarts from 'echarts';
❤版本5
import * as echarts from 'echarts';
这里只需要更改一下引入的方式就可以了
👉 按照官方的案例我们看看在vue3之中使用echarts版本5的方式：
引入
👉 引入我们的echarts
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
👉结构部分一定要记得写个宽高
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
👉 挂载的时候渲染方法
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 创建对 DOM 元素的引用
const chartRef = ref(null);
onMounted(() => {
// 在 DOM 挂载后初始化 ECharts
const chart = echarts.init(chartRef.value);
// 设置图表的配置项和数据
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 30]
}
]
};
// 使用配置项和数据显示图表
chart.setOption(option);
});
</script>
这里我们直接放上所有代码
js
<template>
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// 创建对 DOM 元素的引用
const chartRef = ref(null);
onMounted(() => {
// 在 DOM 挂载后初始化 ECharts
const chart = echarts.init(chartRef.value);
// 设置图表的配置项和数据
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 30]
}
]
};
// 使用配置项和数据显示图表
chart.setOption(option);
});
</script>
<style scoped>
/* 可以根据需要添加样式 */
</style>
预览一下我们的效果
3、详细使用（基本参数）
介绍完了echarts图的基本使用，接下来我们详细说说一些echarts图的一些详细的参数和使用
👉折线图推拽dataZoom
dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级，有时候我们需要拖动滑动x轴底部缩放 。
日常使用
dataZoom: [
{
type: 'inside',
start: 40,
end: 100
},
{
start: 40,
end: 100
}
],
我们自己自定义使用
dataZoom: [{
type: 'inside', //1平移 缩放
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}],
👉折线图平滑属性smooth
有时候我们想要让折线图平滑一些，这就需要用到smooth这个属性
🍎smooth 决定了线段的类型，直线或者曲线，层级与series下的data平级
series: [
// 折线图--人数
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
smooth: true,
// areaStyle: {}
}
]
smooth: true，// true为平滑线段 false为折线，默认为false
👉 折线图legend属性
有时候我们需要使用legend这部分自定义，这里需要注意legend上面和下面的数据的name得对应上才能正确显示！
自定义legend宽高
legend: {
// 自定义 Legend 的显示内容
data: ['数据1', '数据2'],
// 自定义 Legend 的宽度和高度
width: 300,
height: 50
},
自定义 Legend图例样式
//自定义 Legend 中每个图例项的样式
legend: {
// 自定义 Legend 的显示内容
data: ['数据1', '数据2'],
color: ['#000', '#1890FF', '#1890FF'],
// 自定义 Legend 的宽度和高度
itemWidth: 10,// 设置每个小块的宽度和高度
itemheight: 18,// 设置每个小块的宽度和高度
itemStyle: { }
},
👉折线图面积图形式
有时候我们需要让echarts折线图变成面积图
🍎areaStyle: {} 决定了你的图形是否是面积图 ，层级与series下的data平级
areaStyle: {}
👉更改鼠标悬浮框效果tooltip
有时候我们需要更改鼠标悬浮上去以后的效果
鼠标悬浮框显示调整
🍎 tooltip 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级
tooltip: { trigger: 'axis'},
鼠标悬浮框辅助线
axisPointer
tooltip: {
trigger: 'axis',
// 辅助线
axisPointer: {
type: 'line', // 辅助线类型，可选为：'line' | 'shadow' | 'cross'
lineStyle: {
color: '#1890FF', // 辅助线颜色
type: 'dashed'
}
}
},
👉鼠标悬浮提示框formatter
有时候我们需要在鼠标移动上去以后，更改鼠标的提示框数据以及子自定义鼠标的提示框样式，这个时候我们就需要用到formatter 这个属性。
formatter基础使用和更改
tooltip: {
trigger: 'axis',
// 悬浮框提示
formatter: '{b} <br> 检测趋势：{c}',
},
（1）{a}：系列名，series.name。
（2）{b}：数据名，xAxis.data。
（3）{c}：数据值，yAxis.data。
（5）{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
（6）{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
————————————————
换行添加 <br/>
- 多个属性
formatter:"{b0}:{c0}<br/>{b1}:{c1}"
自定义格式
formatter(params) {
return `
<div>
<div style="font-size:12px;color:#000">(这里有个美元符号){params[0].name}</div>
<div style="font-size:12px;color:#1AB5AF"><span style="font-size:12px;color:#000">(这里有个美元符号){params[0].value}%</span></div>
</div>`;
},
自定义提示数据的类型
formatter:function(v){
vartext=v.name;
returntext.length>10?text.substr(0,10)+"...":text;
}
👉鼠标悬浮鼠标悬浮框样式更改
悬浮框上我们还可以操作其他其他详细显示参数
tooltip: {
show: true, // 是否显示提示框，默认为 true
trigger: 'item', // 触发类型，可选值: 'item'（数据项触发），'axis'（坐标轴触发），'none'（不触发）
axisPointer: { // 坐标轴指示器配置项
type: 'line', // 指示器类型，可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
lineStyle: { // 直线指示器样式设置
color: '#aaa' // 线条颜色
},
crossStyle: { // 十字准星指示器样式设置
color: '#aaa' // 线条颜色
},
shadowStyle: { // 阴影指示器样式设置
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
backgroundColor: 'rgba(0,0,0,0.7)', // 提示框背景色
padding: [5, 10], // 内边距
textStyle: { // 文本样式
color: '#fff', // 文本颜色
fontSize: 12 // 文本字号
},
formatter: '{b}: {c}', // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 更多配置项...
},
```
👉调整折线图的边距和位置
有时候我们需要调整图表位置，以进行兼容
🍎 grid 可以帮助我们实现 echarts 鼠标悬浮上去的效果，层级与xAxis平级
grid: {
left: '5%', //距离左侧边距
right: '4%',
bottom: '3%',
containLabel: true
},
🍌 当然gaid还有另外一种写法，哪种需要就用哪种
grid: {
x: "10%", //x 偏移量
y: "7%", // y 偏移量
width: "85%", // 宽度
height: "55%", // 高度
right: "15%",
},
👉 echarts动画
有时候我们的echarts显示显得略微僵硬，这个时候我们就需要用到动画。
animation: true,//动画
// animationEasing:'cubicOut',//动画的缓动方式
animationDuration:15000,//持续时间
series => animation
👉折线图拐点markPoint属性
有时候拐点也需要我们自己进行处理，以防止于视图风格不符合。
拐点markPoint属性使用
option = {
series: [{
type: 'line',
data: [/* 数据 */],
markPoint: {
symbol: 'circle', // 设置拐点小圆点
// 其他配置项...
},
symbolSize:8, // 设置拐点小圆点大小
// 其他配置项...
}],
// 其他配置项...
};
‘circle’: 圆形标记。 ‘rect’: 矩形标记。 ‘roundRect’: 带圆角的矩形标记。 ‘triangle’: 三角形标记。 ‘diamond’: 菱形标记。 ‘pin’: 标记形状为图钉，这种类型主要用于地图上的标记。 ‘arrow’: 标记形状为箭头，这种类型主要用于地图上的标记。
设置拐点小圆点大小
option = {
series: [{
type: 'line',
data: [/* 数据 */],
markPoint: {
symbol: 'circle', // 设置拐点小圆点
},
symbolSize:8, // 设置拐点小圆点大小
// 其他配置项...
}],
// 其他配置项...
};
拐点自定义图片
// 设置标记点的图片链接
var markPointImage = 'https://echarts.apache.org/examples/data/asset/img/echarts-logo.png';
series: [{
type: 'line',
data: data,
markPoint: {
symbol: `image://(这里有个美元符号){markPointImage}`, // 设置标记点的形状为图片
symbolSize: 40, // 设置标记点的大小
data: [
{ type: 'max', name: '最大值' }, // 添加最大值的标记点
{ type: 'min', name: '最小值' } // 添加最小值的标记点
]
}
}]
最后我们看到的就是这个样子
👉折线图跳过空白
有时候也许，我们不需要数据，但是也需要让他没有，这个时候我们就必须调节
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, , 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
👉折线图不同颜色
// 定义折线图的配置
var option = {
xAxis: {
type: 'category',
data: ['Point 1', 'Point 2', 'Point 3', 'Point 4', 'Point 5']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Part 1',
type: 'line',
data: [10, 20, null, null, null],
lineStyle: {
color: '#FF0000' // 红色
}
},
{
name: 'Part 2',
type: 'line',
data: [null, 20, 15, 25, null],
lineStyle: {
color: '#00FF00' // 绿色
}
},
{
name: 'Part 3',
type: 'line',
data: [null, null, null, 25, 30],
lineStyle: {
color: '#0000FF' // 蓝色
}
}
]
};
4、详细使用（x轴）
👉 坐标轴主线颜色（<font style="color:rgb(36, 41, 47);background-color:rgb(244, 246, 248);">axisLine</font>）
option=> xAxis => axisLine
axisLine: {
lineStyle: {
color: '#85C2FC',//X 轴主线的颜色
}
},
👉 网格分割线颜色（splitLine）
option=> xAxis => splitLine
splitLine: {
lineStyle: {
color: '#85C2FC' // 设置 X 轴的分割线颜色为浅灰色
}
}
👉 x轴设置间隔个数显示
主要是调整xAxis里面的interval这个属性，显示x轴的间隔个数
👉这里我们还可以单独设置只是显示奇数个数
axisLabel:{ interval:间隔数量 }
// 只是显示奇数个数
axisLabel:{ interval:0 }
👉 调整x轴分割线
主要是调整xAxis里面的splitLine这个属性
这里我们简单调整一下
js
splitLine: {
show: true,
lineStyle: {
color: 'rgba(133, 194, 252, 0.2)',
type: 'solid'
}
}
最后结果如下：
👉 x轴数据过多无法显示
🍎dataZoom 拖动滑动x轴，为我们提供了巨大的帮助，层级与xAxis平级。
js
dataZoom: [{
type: 'inside', //1平移 缩放
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}],
最后我们鼠标放上去的时候就可以进行拖拽
👉 x轴数据格式自定义
重新定义x轴数据
js
axisLabel: {
formatter: function (value, index) {
// 在这里可以编写自定义的格式化逻辑
// 例如，将日期格式转换为特定格式
return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `(这里有个美元符号)2月'(这里有个美元符号)3`);
// return value.replace(/(\d{4})-(\d{2})-(\d{2})/, `(这里有个美元符号)3/(这里有个美元符号)2/(这里有个美元符号)1`); // 2023年06月01 01-06-2023
}
}
👉 x轴数据设置横向标记线
添加进入series下的[{}]里面的{}之中
js
markLine: {
silent: true,
lineStyle: {
type: 'dashed', // 基准线样式为虚线
color: 'red'
},
data: [
{
yAxis: 200, // 自定义下限值
// name: '最小值', // 基准线名称
label: {
show: false
}
}
]
},
最后我们看看效果，注意这个红色就是添加的线！！
5、详细使用（y轴）
👉 网格分割线颜色（<font style="color:rgb(36, 41, 47);background-color:rgb(244, 246, 248);">splitLine</font>）
option=> yAxis => splitLine
splitLine: {
lineStyle: {
color: '#85C2FC' // 设置 X 轴的分割线颜色为浅灰色
}
}
👉 Y轴设置左侧顶部标题
🍎 title 可以帮助我们实现 echarts y轴顶部的标题，层级与xAxis平级
title: { text: 'Stacked Line' },
注意这里是标题y轴上的，不是中间的legend 标题
👉 Y轴设置左侧单位name字体大小
option => yAxis => nameTextStyle => fontSize
nameTextStyle: {
color: "#ccc",
nameLocation: "start",
fontSize: 20, // 设置字体大小
},
👉y轴显示顶部数值
js
label: {
show: true,
position: 'top'
},
👉y轴左边轴承数值背后添加单位
这里添加单位其实就是y轴的数据格式重新定义
- 设置yAxis => axisLabel => formatter
js
yAxis: {
type: 'value',
axisLabel: {
formatter: function (value, index) {
return value + ' kg'; // 将原始数值与单位字符串拼接起来
}
}
},
这里就是设置我们的这部分
👉 y轴左侧字体颜色
yAxis=> axisLabel => textStyle
yAxis: {
type: 'value',
axisLabel: {
//y轴文字的配置
textStyle: {
color: 'red' //Y轴内容文字颜色
},
fontSize: 14, // 设置字体大小
},
},
👉 y轴左侧字体大小
yAxis=> axisLabel => fontSize
yAxis: {
type: 'value',
axisLabel: {
fontSize: 14, // 设置字体大小
},
},
👉y轴刻度的值跟实际值不对应：
首先就是遇到的数据值不对应问题
y轴轴线
axisLine: {
//y轴线的配置
show: true, //是否展示
lineStyle: {
color: 'rgba(133, 194, 252, 0.8)', //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
width: 1, //y轴线的宽度
type: 'solid' //y轴线为实线
}
},
👉y轴线(Y 轴线)
axisLine: {
show: false, // 显示 Y 轴线
lineStyle: {
color: '#000', // Y 轴线颜色
width: 2 // Y 轴线宽度
}
},
👉y轴刻度线
axisTick: {
show: false, // 显示刻度线
lineStyle: {
color: '#000', // 刻度线颜色
width: 1 // 刻度线宽度
}
}
6、存在的问题处理
当然了，在Echarts折线图的使用过程之中，我们也会遇到一些匪夷所思的问题，所有这里我们记录一下；
👉y轴刻度的值跟实际值不对应：
首先就是遇到的数据值不对应问题，先来看看我们图片部分
代码配置如下：
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 250, 224, 218, 135, 147, 260],
type: 'line',
stack:'Total',
},
{
data:[15,51,150,18,25,29,59,56],
type:'line',
stack:'Total',
}
]
};
原因：
series设置了stack参数，并且stack 名称是一样的
官网对于stack参数属性介绍如下：
属性地址： echarts.apache.org/zh/option.h…
介绍：
解决方案1: 将series中的”stack“属性删除 （推荐）
效果：（这里我们直接用就生效了）
解决方案2:(这个方案也是我推荐的方法 ) 将series中的”stack“属性名称改为不一致 （不推荐）
👉x轴过量数据滑动问题
其实就是上面的我们说的x轴滑动拖拽
也就是在echarts折线图x轴数据过多的时候调整dataZoom属性就可以啦
👉 图表的清空与重新渲染
有时候我们需要重新清除一下图表
// 清空图表
myChart.clear();
将图表清空，但不会销毁 ECharts 实例
销毁 ECharts 实例，可以调用 dispose 方法
// 设置初始配置项
myChart.setOption(option);
7、使用案例
基础使用
id="echartline"
this.xselinechartin('echartline');
xselinechartin(id) {
// 折线图 3
// console.log(document.getElementById(id));
if (document.getElementById(id)) {
let zhexian3 = echarts.init(document.getElementById(id));
let optionzhexian = {
grid: {
left: '20%', //距离左侧边距
right: '0%',
top: '10%',
bottom:'25%',
containLabel: false
},
dataZoom: [{
type: 'inside', //1平移 缩放
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
minValueSpan: 5, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}],
color:'#002f36',// #002f36 008297
tooltip: {
trigger: 'item', // 触发类型，可选值: 'item'（数据项触发），'axis'（坐标轴触发），'none'（不触发）
axisPointer: {
type: 'line', // 设置触发提示的指示器类型
// 可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
},
backgroundColor: 'rgba(0,47,54,1)', // 设置背景颜色
textStyle: {
color: '#fff', // 设置文本颜色
fontSize:12, // 设置文字大小
},
padding: [5, 10], // 内边距
formatter: `2023年{b}<br/>US$ {c}`,
},
xAxis: {
type: 'category',
data: ['11月26日', '11月27日', '11月28日', '11月29日', '11月30日', '12月1日', '12月2日']
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0,20,0],
type: 'line',
smooth: false,//
}]
};
zhexian3.setOption(optionzhexian);
}
},
完整案例1
option = {
color: ['#1890FF', '#52E3A9'], //'#FFB566',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
splitLine: {
color: '#85C2FC'
},
legend: {
data: ['Evaporation', 'Precipitation', '22']
},
xAxis: [{
boundaryGap: false, //过长隐藏x轴文字
splitLine: {
show: false,
lineStyle: {
color: ['rgba(133, 194, 252, 0.4)'],
width: 1,
type: 'solid'
}
},
axisLine: {
lineStyle: {
type: 'solid',
// color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
color:'#DBD8D9',
width: '2' //坐标线的宽度
}
},
axisLabel: {
//x轴文字的配置
show: true,
textStyle: {
color: '#808080',
fontSize: '10px'
}
},
type: 'category',
data: [
'2022年6月2号',
'2日',
'3日',
'4日',
'5日',
'6日',
'7日',
'8日',
'9日',
'10日',
'11日'
],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 250,
interval: 50,
axisLabel: {
//y轴文字的配置
formatter: '{value}',
show: true,
textStyle: {
color: '#808080',
fontSize: '10px'
}
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(133, 194, 252, 0.4)', //坐标线的颜色
width: '2' //坐标线的宽度
}
},
splitLine: {
show: true,
lineStyle: {
// color: ['rgba(133, 194, 252, 0.4)'],
color:'#DBD8D9',
width: 1,
type: 'solid'
}
},
},
{
type: 'value',
name: '',
show: false,
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: 'Evaporation',
type: 'line',
smooth: true, //平滑
showSymbol: false,
lineStyle: {
// 阴影部分
width: 3, // 线条颜色、粗细
color: '#FFB566',
shadowOffsetX: 0, // 折线的X偏移
shadowOffsetY: 4, // 折线的Y偏移
shadowBlur: 8, // 折线模糊
shadowColor: 'rgba(255, 181, 102, 0.4)' //折线颜色
},
color: '#FFB566',
yAxisIndex: 1,
tooltip: {
valueFormatter: function(value) {
return value;
}
},
data: [20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
},
{
name: 'Precipitation',
type: 'line',
smooth: true, //平滑
lineStyle: {
// 阴影部分
width: 3, // 线条颜色、粗细
color: '#1791FF',
shadowOffsetX: 0, // 折线的X偏移
shadowOffsetY: 4, // 折线的Y偏移
shadowBlur: 8, // 折线模糊
shadowColor: 'rgba(3,116,255,0.4)' //折线颜色
},
showSymbol: false,
color: '#52E3A9',
yAxisIndex: 1,
tooltip: {
valueFormatter: function(value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name: '22',
type: 'line',
showSymbol: false,
lineStyle: {
// 阴影部分
width: 3, // 线条颜色、粗细
color: '#52E3A9',
shadowOffsetX: 0, // 折线的X偏移
shadowOffsetY: 4, // 折线的Y偏移
shadowBlur: 8, // 折线模糊
shadowColor: 'rgba(3,116,255,0.4);' //折线颜色
},
smooth: true,
color: '#1890FF',
yAxisIndex: 1,
tooltip: {
valueFormatter: function(value) {
return value + ' °C';
}
},
data: [2, 6.3, 5.0, 6, 7, 8, 9, 12.0, 6.2, 10.2, 20.3, 23.4]
}
]
};
案例2
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.setOption(
{
tooltip: {
trigger: ''
},
// legend: {
// data: ['Email', 'Union Ads']
// },
grid: { //距离各个地方的边距 1
left: '10%',
right: '5%',
bottom: '10%',
containLabel: true
},
grid: { //另外一种方式控制 2
x: "12%",//x 偏移量
y: "7%", // y 偏移量
width: "87%", // 宽度
height: "79%"// 高度
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',,
// 隐藏y轴
axisLine: {
show: false
},
// 隐藏y轴刻度线
axisTick: {
show: false
},
// y轴网格线设置
splitLine: {
type: "dashed",
color: "#eeeeee"
},
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
});
完整3
option = {
tooltip: { trigger: 'axis' },
dataZoom: [
{
type: 'inside', //1平移 缩放
throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
minValueSpan: 12, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
start: 0, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
}
],
grid: {
x: '10%', //x 偏移量
y: '7%', // y 偏移量
width: '50%', // 宽度
height: '55%', // 高度
right: '20%'
},
xAxis: {
type: 'category',
data: [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10'
],
axisLabel: { interval: 1 }
},
yAxis: {
type: 'value'
},
series: [
{
data: [
150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 150, 230,
224, 218, 135, 147, 260, 150, 230, 224, 218, 135
],
type: 'line'
}
]
};
扫一扫
2524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
