最近项目用到了echarts图表，需要自定义的地方很多，查资料也浪费了不少时间，在这里把用到的配置项记录一下，以便日后查看。
折线图
图表说明：
1、右上方legend是写死的，红绿代表正常范围内的最低和最高体温；
2、隐藏x轴y轴文字，x轴文字自定义；
3、点击圆点取消悬浮说明，改为折线图上方信息展示。
<div id="myChart" style="width: 100%; height: 180px"></div>
const myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
// legend: { // 注释legend,不显示
// data: ['体温'],
// textStyle: {
// color: '#EFD197' //legend字体颜色
// }
// },
color:['#EFD197'],
grid: { // 定位折线图位置
left: '0',
right: '0',
top:'0',
bottom: '1%', // 这里设置1%是因为要把X轴线露出来
// containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, // x轴从0开始
data: ['2020-8-1', '2020-8-2', '2020-8-3'], // x轴数据
name: '日期', // x轴名称
// 字体样式
axisLabel: {
show: true, // 隐藏x坐标轴
textStyle: {
color: '#BABFC6',
fontSize:'10',
textAlign: 'right',
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
color: ['#EEEEEE']
}
},
// x轴的颜色和宽度
axisLine:{
lineStyle:{
color:'#EEEEEE',
width:1, //这里是坐标轴的宽度,可以去掉，
}
}
},
yAxis: {
type: 'value',
name: '体温', // y轴名称
scale: true,
min: '35', // y轴起始值不是0的时候，可自定义最小值
max: '39', // 最大值
// splitNumber: (39 - 35) / 2, // y轴线密度
// y轴名称样式
// nameTextStyle: {
// fontWeight: 600,
// fontSize: 18
// },
axisLabel: {
show: true, // false 隐藏y坐标轴
textStyle: {
color: '#BABFC6',
fontSize:'10',
textAlign: 'right',
}
},
// 控制网格线是否显示
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
color: ['#EEEEEE']
}
},
// y轴的颜色和宽度
axisLine:{
lineStyle:{
color: '#EEEEEE',
width: 1, //这里是坐标轴的宽度,可以去掉
}
}
},
tooltip: {
trigger: 'axis', // axis item none三个值
formatter:function (params) { // 之前用了echarts点击事件，点击某个圆点上面显示当前日期和体温，有时候会无法触发点击事件，怀疑可能是点击事件作用的圆点上，现在点击的是竖线，所以没办法触发，所以直接在这个事件里就可以了。
Vue.set(that.currentBabyTemperature, "name", params[0].name);
Vue.set(that.currentBabyTemperature, "value", params[0].value);
},
axisPointer: { // 设置竖线颜色
type: 'line', // 竖线
lineStyle: {
color: '#EFD197'
}
},
},
series: [{
name: '体温',
data: ['36.6', '36.7', '36.5'],
type: 'line',
smooth: true, // 折线图是否为平滑曲线（默认是生硬直线）
areaStyle: {
normal: {
color: 'rgba(239, 209, 151, 0.1)' //改变区域颜色
}
},
markLine: {
symbol: ['none', 'none'], //去掉箭头
// symbol:'star', //拐点样式
// symbolSize: 8, //拐点大小
itemStyle: {
normal: {
lineStyle: {
type: 'dashed',
color: '#0FC789', // 设置最低体温标注线颜色
// width:3, //折线宽度
// color:{ //设置渐变
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: '#0FC789 '// 0% 处的颜色
// }, {
// offset: 1, color: '#0FC789' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
},
label: {
show: false, // 隐藏数值
position:'middle'
}
}
},
data: [{
yAxis: 36,//这里设置false是隐藏不了的，可以设置为-1
}]
}
}, {
type: 'line',
smooth: true,
markLine: {
symbol: ['none', 'none'],//去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: 'dashed', // 虚线
color: '#FF0000', // 设置最高体温标注线颜色
},
label: {
show: false, // 隐藏数值
position:'middle'
}
}
},
data: [{
yAxis: 37.3,//这里设置false是隐藏不了的，可以设置为-1
},]
}
}]
})
myChart.resize();
// 点击事件
// myChart.on('click', function (params) {
// params可获取当前坐标点的数据
// });
圆环
<div id="mychart" style="width: 100%; height: 180px;"></div>
let myChart = echarts.init(document.getElementById('babyEducationStroking'));
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
color: ['#79E786', '#AACE36', '#F8C167', '#FB968A', '#A7C7EC', '#D4DCE9', '#EEEEEE'],
legend: {
orient: 'vertical',
right: 0, // 定位legend位置
data: ['抚摸', '肢体操', '黑白色卡', '其他训练', '早教音频', '早教音乐'],
icon:"circle",
formatter:function(name){
let target;
let data = [{
value: 12,
name: '抚摸'
}, {
value: 12,
name: '肢体操'
}, {
value: 12,
name: '黑白色卡'
}, {
value: 9,
name: '其他训练'
}, {
value: 11,
name: '早教音频'
}, {
value: 12,
name: '早教音乐'
}];
for(let i=0;i<seriesData.length;i++){
if(seriesData[i].name===name){
target=seriesData[i].value
}
}
let arr=[name, target + '次'] // 自定义文字
return arr.join("\n")
},
textStyle:{
fontSize: 12,//字体大小
color: '#888888'//字体颜色
},
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'], // 控制圆环大小
center: ['25%', '50%'], // 定位圆环位置
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false, // 圆环中间文字
fontSize: '12',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: seriesData
}]
})
myChart.resize();
