本人此前也运用Echarts开发过一些图表，但是记不住众多的配置项。希望给自己一个机会通过一系列的demo强化记忆，练习内容为模仿antV G2Plot的示例。demo的环境为Vue3+TS为了练手。

基础折线图

基础款

  在数据点、数轴、提示框以及多处颜色与Echarts的折线示例有差异，活不多表，上option。

import {reactive} from 'vue';
import Echarts from '@/components/Echarts.vue';
import data from './data.json';

type dataItem = {
    Date: string,
    scales: number
}
const fetchData = () => Promise.resolve(data);
export default {
    setup() {
        const option = reactive({
            tooltip: { // 提示框、hover坐标对齐线
                backgroundColor: '#fff',
                trigger: 'axis', // 坐标触发
                extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 在提示浮层上添加的样式
                textStyle: {
                    color: '#000'
                },
                axisPointer: {
                    type: 'line', // hover坐标对齐线
                    z: 0, // 堆叠优先级
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                formatter:(params: { // 提示框内容
                    value: dataItem,
                    marker: string,
                    dimensionNames: ('Date' | 'scales')[],
                    encode: {
                        x: number[],
                        y: number[]
                    }
                }[]): string => {
                    const xKey = params[0].dimensionNames[params[0].encode.x[0]];
                    const yKey = params[0].dimensionNames[params[0].encode.y[0]];
                    return `${params[0].value[xKey]}<br/>${params[0].marker} ${yKey}: ${params[0].value[yKey]}`;
                }
            },
            xAxis: {
                type: 'time',
                splitLine: { // 象限内刻度对齐线
                    show: false
                },
                axisTick: { // 刻度线
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: { // 坐标文本
                    color: '#666',
                    formatter(value: number): string { // 坐标值
                        const date = new Date(value);
                        return `${date.getFullYear()}-${date.getMonth() + 1}`;
                    }
                }
            },
            yAxis: {
                axisLine: { // 坐标线
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#666'
                }
            },
            dataset: {
                source: [] as dataItem[]
            },
            series: [{
                type: 'line',
                symbol: 'circle', // 数据点形状
                symbolSize: 8, // 数据点大小
                showSymbol: false, // 平时不显示，只有在激活提示框时显示
                hoverAnimation: false, // 关闭激活变大动画
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 2,
                        color: 'rgb(52, 149, 245)'
                    }
                },
                lineStyle: {
                    color: 'rgb(52, 149, 245)'
                },
                encode: {x: 'Date', y: 'scales'} // 映射dataset
            }]
        });
        fetchData().then((data: dataItem[]) => {
            option.dataset.source = data;
        });
        return {
            option
        }
    },
    components: {
        Echarts
    }
}

• tooltip: 跟踪提示框以对齐线
  • trigger='axis': 坐标切换（适用于折线、柱状等函数式表达）
  • extraCssText='box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);': 应用于提示框的css
  • axisPointer: 对齐线
• xAxis/yAxis: 坐标轴
  • splitLine: 象限内对齐刻度的辅助线
  • axisTick: 刻度线
  • axisLabel: 刻度旁的提示
  • axisLine: 轴线
• series 系列（视图中的一个图图表）
  • symbol: 数据点形状，empty前缀为空心图形
  • symbolSize: 数据点的大小
  • showSymbol = false: 平时不显示，只有在激活提示框时显示
  • hoverAnimation = false: 关闭激活变大动画
  • encode: 映射dataset.source的属性或数组索引

TODO

  时间轴的间隔的选取目前与antV还有差异

曲线折线

  此后将省略重复的option和组件拼装过程

series: [{
	smooth: true, // 平滑曲线
}]

• series.smooth=true: 平滑曲线

带数据折线

  增加了默认的数据点显示，以及数据点上方数据显示。

series: [{
    // showSymbol: false, // to default
    label: { // 拐点上方的数据文本
        show: true,
        color: '#000'
    },
    emphasis: { // hover激活状态
        itemStyle: {
            borderWidth: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 1
        }
    },
}]

• label: 拐点上方的数据文本
• emphasis: hover激活状态

TODO

  激活状态的数据点大小还无法调节

配置数据点样式

  平时的数据点为空心菱形显示，激活状态『添加』圆点样式数据点

series: [{
    symbol: 'emptyDiamond', // 空心菱形
}]

TODO

  激活状态的还无法实现圆点叠加在菱形上

缩略轴

// option
dataZoom: [{ // 拖拽轴区域
    start: 10, // 起始百分比
    end: 20, // 结束百分比
    type: "inside" // 内置于坐标轴的拖动模式
},
{
    start: 10,
    end: 20
}]

• dataZoom: 缩略轴
  • type = 'inside': 内置于坐标轴的缩略轴
  • start: 起始百分比
  • end: 起始百分比

TODO

  还无法使缩略轴两端值默认显示