折线图01了解基础配置项

参考链接

Echart官网：https://www.echartsjs.com/zh/option3.html#title

折线图模板来源：https://www.makeapie.com/editor.html?c=x4SFfqL-2R

案例折线图源码修改、注释后代码

const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
option = {
    backgroundColor: '#fff',
    title: {
        //标题内容、字体、是否居中、定位
        text: '全国6月销售统计',
        textStyle: {
            fontSize: 18,
            fontWeight: 400,
            color: '#F56948',
        },
        left: '7%',
        top: '5%',
    },
    legend: {
        //图例组件，表述数据和图形的关联
        icon: 'circle', //square
        top: '7%',
        right: '5%',
        itemWidth: 8, //图例大小
        itemGap: 20, //图例间距
        textStyle: {
            //图例描述文字样式
            color: '#556677',
        },
    },
    tooltip: {
        //鼠标悬浮的样式设置
        trigger: 'axis', //坐标轴触发，item则为单个点触发
        axisPointer: {
            //当坐标轴被指定
            type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
            label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 15,
            },
            lineStyle: {
                width: 20,
            },
        },
        backgroundColor: '#aaaaff', //浮窗背景色
        textStyle: {
            color: '#5c6c7c',
        },
        padding: [10, 10], //悬浮窗div的内边距
        extraCssText: 'box-shadow: 5px 0 10px 0 rgba(163,163,163,1);', //box-shadow设置盒子阴影
        //extraCssText: 'white-space: normal; word-break: break-all;', //这个地方还可以处理文本超长问题
        formatter: function (params) {
            //自定义悬浮窗内容
            //console.log(params);
            var res = '<div><p>地点：' + params[0].name + '</p></div>';
            for (var i = 0; i < params.length; i++) {
                res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>';
            }
            return res;
        },
    },
    grid: {
        //用于定义直角系整体布局
        top: '15%',
        //left: '15%',
        //right: '15%',
        //buttom: '15%'
    },
    xAxis: [ //x轴
        {
            type: 'category',
            data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
            axisLine: {
                lineStyle: {
                    color: '#DCE2E8',
                },
            },
            axisTick: {//刻度线
                show: true,
            },
            axisLabel: {//可以将formmat函数将过长的文字折行显示
                interval: 0, //间隔几个不显示
                textStyle: {
                    color: '#556677',
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 15,
                rotate: -40, //x轴文字（旋转）倾斜角度
            },
            axisPointer: {
                label: {
                    padding: [0, 0, 10, 0],
                    // 这里的margin和axisLabel的margin要一致!
                    margin: 15,
                    // 移入时的字体大小
                    fontSize: 12,
                    backgroundColor: { //设置4个颜色，0%和100%是极端色，另外设置两个86%不同颜色，则会显示白色，最终效果是最底部14%有颜色
                        type: 'linear', //线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#fff', // 0% 处的颜色
                            },
                            {
                                // offset: 0.9,
                                offset: 0.86,

                                color: '#fff', // 0% 处的颜色
                            },
                            {
                                offset: 0.86,
                                color: '#33c0cd', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#33c0cd', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            },
            boundaryGap: false, //坐标轴两端空白政策,true留空白
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisTick: {
                show: true,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#556677',
                },
            },
            splitLine: { //平行线，分割线
                show: false,
            },
        },
        {
            type: 'value',
            position: 'right', //位置
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#556677',
                },
                formatter: '{value}',
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8',
                },
            },
            splitLine: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: 'Adidas',
            type: 'line',
            data: [10, 10, 30, 12, 15, 3, 7],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                        offset: 0,
                        color: '#9effff',
                    },
                    {
                        offset: 1,
                        color: '#9E87FF',
                    },
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20,
            },
            itemStyle: {
                normal: {
                    color: colorList[0],
                    borderColor: colorList[0],
                },
            },
        },
        {
            name: 'Nike',
            type: 'line',
            data: [5, 12, 11, 14, 25, 16, 10],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                        offset: 0,
                        color: '#73DD39',
                    },
                    {
                        offset: 1,
                        color: '#73DDFF',
                    },
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20,
            },
            itemStyle: {
                normal: {
                    color: colorList[1],
                    borderColor: colorList[1],
                },
            },
        },
        {
            name: '老北京布鞋',
            type: 'line',
            data: [150, 120, 170, 140, 500, 160, 110],
            symbolSize: 1,//图例组件大小
            yAxisIndex: 1, //用第几个y轴，0是第一个
            symbol: 'circle',//图例组件，标志类型
            smooth: true, //折线是否圆滑
            showSymbol: false,//在线条里显示图例组件样式
            lineStyle: { //设置线条的渐变色
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                        offset: 0,
                        color: '#fe9a',
                    },
                    {
                        offset: 1,
                        color: '#fe9a8b',
                    },
                ]),
                shadowColor: 'rgba(254,154,139, 0.3)',
                shadowBlur: 10, //设置阴影的模糊系数，0为不模糊
                shadowOffsetY: 20,//y轴方向下移多少
            },
            itemStyle: {//图例组件的颜色，主颜色和边框颜色
                normal: {
                    color: colorList[2],
                    borderColor: colorList[2],
                },
            },
        },
    ],
};

echart基本配置项

最基本的几个配置项：

grid（图表相对画布的位置）
title（表头）
tooltip（鼠标移上悬浮窗显示数据）
legend（不同线或色块代表的数据类型）
xAxis（x轴配置信息）
yAxis（y轴配置信息）
series（表的类型以及对应类型的数据配置）

参考链接：https://blog.csdn.net/Joe0217/article/details/103064451

名词解释

基本名词

名词	描述
chart	是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis	直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型
xAxis	直角坐标系中的横轴，通常并默认为类目型
yAxis	直角坐标系中的纵轴，通常并默认为数值型
grid	直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend	图例，表述数据和图形的关联
dataRange	值域选择，常用于展现地域数据时选择值域范围
dataZoom	数据区域缩放，常用于展现大量数据时选择可视范围
roamController	缩放漫游组件，搭配地图使用
toolbox	辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip	气泡提示框，常用于展现更详细的数据（鼠标hover时相关的样式都在这里写）
timeline	时间轴，常用于展现同一系列数据在时间维度上的多份数据
series	数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据

图表名词

名词	描述
line	折线图，堆积折线图，区域图，堆积区域图。
bar	柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter	散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
k	K线图，蜡烛图。常用于展现股票交易数据。
pie	饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar	雷达图，填充雷达图。高维度数据展现的常用图表。
chord	和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force	力导布局图。常用于展现复杂关系网络聚类布局。
map	地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。
heatmap	热力图。用于展现密度分布信息，支持与地图、百度地图插件联合使用。
gauge	仪表盘。用于展现关键指标数据，常见于BI类系统。
funnel	漏斗图。用于展现数据经过筛选、过滤等流程处理后发生的数据变化，常见于BI类系统。
evnetRiver	事件河流图。常用于展示具有时间属性的多个事件，以及事件随时间的演化。
treemap	矩形式树状结构图，简称：矩形树图。用于展示树形数据结构，优势是能最大限度展示节点的尺寸特征。
venn	韦恩图。用于展示集合以及它们的交集。
tree	树图。用于展示树形数据结构各节点的层级关系
wordCloud	词云。词云是关键词的视觉化描述，用于汇总用户生成的标签或一个网站的文字内容

参考链接：Echarts官方文档！_qiudechao1的博客-CSDN博客_echarts文档

axis的类型

当type=time时，x轴不需要再另外设置data。
只需要再series中的data设为二维数组，每个元素是时间戳和值。
此时x轴会自定刻度间隔，需要自定义的话，使用splitNumber属性

如想获取当前时间前24小时，每隔半小时显示一个随机数。把下面获得的data赋值给series中的data属性即可
————————————————
版权声明：本文为CSDN博主「runOnWay」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/runOnWay/article/details/84108052