echarts一些常用配置

echarts 一些常用配置 v5

API地址：https://www.echartsjs.com/option.html#title

一、修改坐标文字大小

axisX:{
    name: '时间', // 坐标轴名称
    nameTextStyle: {
        // 坐标轴名称字体样式
    },
    axisLabel: {
        fontSize: 8
        color: '#4A9D63'
    }
}

二、图表填充容器

grid: {
    top: 20, // 数值根据自己的需要修改
    left: 20,
    right: 20,
    bottom: 20
}

三、鼠标悬停查看数据

tooltip: {
    trigger: 'axis', // tooltip 由什么触发
    formatter: '{a0} - {b0}' // 显示信息格式
}

四、最大值和最小值

k 线中的最大值和最小值很实用，能最大化的显示区块的 k 线状态

yAxis: {
    // value 中存储着当前数据的最大和最小值
    min: function (value) {
        return value.min
    },
    max: function (value) {
        return value.max
    }
}

五、line 一些配置

拆线图多数据的折线颜色

series:{
    lineStyle: {},  // 线的颜色
    areaStyle: {},  // 拆线下方区域颜色
    itemStyle: {}   // 点的颜色
}

// 如
series: [{
    data: getDatas(data.data) ,
    type: 'line',
    smooth: true,
    lineStyle: {
        color: '#007AFF'
    },
    areaStyle: {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#5AC8FA' // 0% 处的颜色
            }, {
                offset: 1, color: '#007AFF' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
    },
    itemStyle: {
        color: '#FF9500'
    }
}],

坐标轴和刻度的颜色

 yAxis: { // 纵坐标轴样式
     axisLine: {
         show: true,
         lineStyle: {
             color: COLOR.main
         },  // 线的颜色
      }
   }
}

坐标轴刻度字体样式

yAxis: { // 纵
    axisLabel: { // 坐标轴 label 样式
        fontSize: 10
    },
}

坐标轴刻度的数量

 yAxis: { // 纵
     type: 'value',
     splitNumber: 3, // 显示的刻度数量
}

网格线颜色

 yAxis: { // 纵
     splitLine: { // y 轴的分隔线样式
         show: true,
         lineStyle: {
             color: 'rgba(0,0,0,0.2)',  // 线的颜色
             width: 1,           // 宽度
             type: 'solid'       // 样式
         },
     },
}

下方的纵向的分隔线就是上面这个

六、标线

添加标线

标线的样式默认是指向y轴的带箭头的线

const markLineColor = '#FF3B30';                // 下单价格标线颜色
const markLineCurrentColor = '#009c90';         // 实时价格标线颜色
series: [
            {
                type: 'k',
                data: [],
                markLine: {  // 标线设置区域
                    silent: true,   // 是否响应鼠标
                    label: '',
                    lineStyle: {    // 线的样式
                        color: markLineCurrentColor,
                        type: 'solid'
                    },
                    symbol: 'none', // 标线标记
                    data: [         // 这种格式是定义定值的横线
                        {
                            name: '实时价格',
                            yAxis: 12643.4
                        }
                    ],
                },
            },
            {       // 第二条线
                type: 'line',
                data: [],
                markLine: {
                    silent: true,
                    label: '',
                    lineStyle: {
                        color: markLineColor,
                        type: 'dashed'
                    },
                    data: [],
                }
            },
        ]

想要多加几条，只需要在 option 的 series 中再加条数据并添加 markline 即可

七、添加 MA 曲线

MA 曲线是对k线图涨跌趋势的标识
echart 中的 MA 曲线是自己计算出来的

// 计算 MS 线数值
// N日MA = N日收市价的总和 / N(即算术平均数)
function calculateMA(dayCount, data) {
    let result = [];
    for (let i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
            sum += Number(data[i - j][1]);
        }
        result.push(+(sum / dayCount).toFixed(3));
    }
    return result;
}

上面是计算公式，添加的时候，在 series 中添加需要的线即可

{
    name: 'MA5',
    type: 'line',
    data: [],
    smooth: true,       // 曲线平滑与否
    showSymbol: false,  // 是否显示每个数据点的图形
    symbol: 'circle',
    symbolSize: '1',
    lineStyle: {
        width: 1,
        color: '#4B9E65',
        opacity: 0.6
    },
},
{
    name: 'MA10',
    type: 'line',
    data: [],
    smooth: true,
    showSymbol: false,
    symbol: 'circle',
    symbolSize: '1',
    lineStyle: {
        width: 1,
        color: '#ED6C2D',
        opacity: 0.6
    },
},
{
    name: 'MA20',
    type: 'line',
    data: [],
    smooth: true,
    showSymbol: false,
    symbol: 'circle',
    symbolSize: '1',
    lineStyle: {
        width: 1,
        color: '#5AC8FA',
        opacity: 0.6
    },
},
{
    name: 'MA30',
    type: 'line',
    data: [],
    smooth: true,
    showSymbol: false,
    symbol: 'circle',
    symbolSize: '1',
    lineStyle: {
        width: 1,
        color: '#5856D6',
        opacity: 0.6
    },
},

把他们的 data 中插入数据，priceData 是已经存在的数据

optionK.series[1].data = calculateMA(5, priceData);     // 5
optionK.series[2].data = calculateMA(10, priceData);    // 10
optionK.series[3].data = calculateMA(20, priceData);    // 20
optionK.series[4].data = calculateMA(30, priceData);    // 30

八、Bar 的配置

bar 的背景

series: [
      {
          name: '报警数量',
          type: 'bar',
          barWidth: 25, // 柱状图宽度

			// 需要下面这两个，才能生效
          showBackground: true,
          backgroundStyle: {
              color:   this.$CHART_OPTION.COLOR.green
          },

          data: [],
      },
 ]