zheEchart () {
this.myChart = echarts.init(this.$refs.zheDom)
const option = {
xAxis: {
type: 'category',
boundaryGap: false, // 紧挨边缘
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 轴刻度
axisLabel: {
show: true,
textStyle: {
color: '#75bcff'
}
},
// 轴线
axisLine: {
lineStyle: {
color: '#5b7b80'
}
},
splitLine: {
// 显示垂直网格线
show: true,
lineStyle: {
color: '#75bcff'
}
}
},
yAxis: {
type: 'value',
// 轴刻度
axisLabel: {
show: true,
textStyle: {
color: '#75bcff'
}
},
// 轴线
axisLine: {
lineStyle: {
color: '#5b7b80'
}
},
// 显示垂直网格线
splitLine: {
show: false
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
// 阴影面积
color: '#135877'
},
// 数据连线的线设置
itemStyle: {
normal: {
lineStyle: {
color: '#58b0f0'
}
}
}
}
]
}
this.myChart.setOption(option)
}
==================
前提说明:xAxis表示x轴,yAxis表示y轴,series表示数据区域
以官网案例中的基础面积图来示例:Examples - Apache ECharts
案例中的折线图已经很完美了,但是在实际中根据不同的需求要对此作出调整,比如:
axisLabel: {//坐标轴的刻度值
textStyle: {
color: 'red',//坐标值得具体的颜色
fontSize: 10,
}
}
axisLine: {
show: true, // 是否显示坐标轴轴线
lineStyle: {
color: 'pink', // 坐标轴线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型('solid',实线类型;'dashed',虚线类型;'dotted',点 // 状类型)
},
},
axisTick: {//坐标轴刻度
inside: true,//刻度标签朝内
length: 1,//刻度标签长度
lineStyle: {
color: 'green',//刻度标签的颜色
width: 3,//刻度标签的宽
cap: 'round',//刻度标签的形状:round圆形,具体参考官网给的形状
}
},
splitLine: {//坐标轴刻度线
show: true,
lineStyle: {
color: '#000', // 坐标轴线线的颜色
width: '0.2', // 坐标轴线线宽
type: 'slide',
}
},
1、y轴自定义轴刻度段,需要做以下配置
max: 2000, //设置最大值
min: 0, //最小值
splitNumber: 4,//分割几段
说明:线条类型。
默认值:'solid'。
参数类型:string
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
}
}
},
}]
最终效果图(dashed线型虚线):
smooth: true,//连线的圆滑
itemStyle: {
normal: {
lineStyle: {//折线图连线的设置
color: '#47B5FF',
width: 1//设置线条粗细
}
}
},
通过areaStyle来控制,不添加任何内容,有自己默认的颜色,需要修改阴影面积颜色,通过color来修改
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#FFFFFF' // 0% 处的颜色
},
{
offset: 1, color: '#47B5FF' // 100% 处的颜色
}],
}
label:控制是否展示提示文本
formatter:标签内容格式器,详细用法参考文档
思路:
1、将数据抽离出去,每个添加一个symbol——none:无;circle:圆
2、对抽离出去的数据进行数据筛选,选出最大值索引
3、选出最大值给其添加样式并返回
var temp = [
{ value: 820, symbol: '' },
{ value: 932, symbol: '' },
{ value: 901, symbol: '' },
{ value: 934, symbol: '' },
{ value: 1290, symbol: '' },
{ value: 1330, symbol: '' },
{ value: 1320, symbol: '' }]
series中:
data: temp,//引用抽离的数据
label: {
normal: {
show: true,
position: [10, -5],
formatter: function (params) {
let maxIndex = 0;
for (let i in temp) {//获取最大值的索引
maxIndex = temp[i].value > temp[maxIndex].value ? i : maxIndex
}
if (params.dataIndex == maxIndex) {//找到数组中最大的数,给其添加圆点和样式
temp[params.dataIndex].symbol = "circle"
temp[params.dataIndex].itemStyle = {
normal: {
color: '#60AFFF',
borderColor: '#60AFFF',
}
}
return `{resStyle|${params.data.value}}`
} else {
temp[params.dataIndex].symbol = "none"
return ""
}
},
rich: {//提示文本样式
resStyle: {
backgroundColor: '#47B5FF',
color: "#fff",
fontSize: 10,
width: 22,
height: 15,
lineHeight: 15,
boderWidth: 1,
fontFamily: 'D-DIN',
fontStyle: 'normal',
fontWeight: 'normal',
align: "center",
}
}
}
},