echarts曲线图小型迷你折线

### 关于ECharts小型迷你折线图

ECharts 是由百度商业前端数据可视化团队开发的一个纯JavaScript图表库，它基于HTML5 Canvas 提供了丰富的交互特性和高度自定义能力[^1]。

为了创建一个小而精美的迷你折线图，在初始化 ECharts 实例时可以设置较小的高度宽度参数，并调整其他样式属性来适应特定需求。下面给出一段简单的代码示例用于展示如何构建这样一个迷你折线图：

// 初始化echarts实例并指定dom容器id
var myChart = echarts.init(document.getElementById('main'));

option = {
    title: {
        text: '迷你折线图',
        textStyle: {fontSize: 10}
    },
    tooltip : {
        trigger: 'axis'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五'],
            axisLabel:{interval:0,rotate:-30},
            axisLine:{show:false}, //隐藏X轴刻度线
            splitLine:{show:true} //显示分割线
        }
    ],
    yAxis : [
        {
            type : 'value',
            min: 0,
            max: 200,
            interval: 50,
            axisTick: {show: false}, //不显示y轴上的小标记
            splitNumber: 4,
            axisLine: {show: false}// 不显示Y轴线条
        }
    ],
    series : [
        {
            name:'销量',
            type:'line',
            stack: '总量',
            areaStyle: {},
            lineStyle:{
                width:1
            },
            symbolSize:8,// 设置折线上点大小
            itemStyle: {
                normal: {
                    color:'#FF7F50',// 折线颜色
                    borderColor:'#FF7F50' ,
                    borderWidth:2
                }
            },
            data:[120, 132, 101, 134, 90]
        }
    ]
};

myChart.setOption(option);

这段脚本通过配置`grid`, `xAxis`, 和 `yAxis` 的属性使得整个图形更加紧凑；同时减少了不必要的装饰元素（比如坐标轴的边框），让这个迷你版看起来更简洁明了。此外还设置了较细的线条以及适当缩小的文字字号以匹配整体风格。