如何在 vue 项目中优雅地使用 v-图表并自定义工具提示和滚动条设置
最编程
2024-04-10 21:52:37
...
export const testTaskChartConfig = (type, modelType = '全部模块') => {
return {
extend: {
title: {
id: 'testTaskChart',
},
legend: {
orient: 'horizontal',
itemWidth: 10,
itemHeight: 10,
x: 'center',
y: 'bottom',
icon: 'circle',
itemGap: 24,
textStyle: {
fontSize: 14,
fontFamily: 'Microsoft YaHei',
},
data: [
// name和下面的series中data的name对应显示。后面加textStyle可设置图例后面文字的颜色
{ name: '新增', textStyle: {}},
{ name: '执行中', textStyle: {}},
{ name: '已完成', textStyle: {}},
],
},
dataZoom: { // 设置滚动条
show: true, // 为true 滚动条出现
realtime: true,
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
height: 22, // 表示滚动条的高度，也就是粗细
start: 0, // 表示默认展示0%～100%这一段。
end: 60,
textStyle: {
color: 'rgba(0, 0, 0, 0)',
},
bottom: 30,
},
xAxis: {
type: 'category',
boundaryGap: true, // 坐标轴两边留白策略，
data: [],
axisLabel: {
interval: 0, // 0：全部显示，1：间隔为1
margin: 8, // x轴与上方图表的距离
},
axisTick: {
length: 5,
},
},
yAxis: {
type: 'value',
minInterval: 1,
},
tooltip: { // 使用formatter 自定义返回html
trigger: 'axis',
formatter: (params, value, callback) => {
// console.log(params);
let html = '';
html = `<div>
<span>123</span>
</div>`;
return html;
},
},
series: [
{
name: '新增',
key: 'count',
type: type === 'histogram' ? 'bar' : 'line',
data: [],
barWidth: 11,
smooth: 0,
showAllSymbol: true,
itemStyle: {
color: '#1f8dfb',
},
},
{
name: '执行中',
key: 'processing',
type: type === 'histogram' ? 'bar' : 'line',
data: [],
barWidth: 11,
showAllSymbol: true,
smooth: 0,
itemStyle: {
color: '#ffbb34',
},
},
{
name: '已完成',
key: 'completed',
type: type === 'histogram' ? 'bar' : 'line',
data: [],
barWidth: 11,
showAllSymbol: true,
smooth: 0,
itemStyle: {
color: '#4da89f',
},
},
],
},
};
};