echart.js使用——绘制图表使用详细介绍

骑猪看日落 2021-07-25 17:47 659阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
今天遇到一个功能：要求做上面的图表（折线图+柱状图）；  
我对echart.js不是很熟悉，所以用的时候翻看了文档。  
下面介绍使用过程中的详细记录：

## echart.js官网 ##

[echart.js官网地址：https://echarts.apache.org/zh/index.html][echart.js_https_echarts.apache.org_zh_index.html]

## echart.js下载 ##

点击官网首页的下载： **下载**>**下载**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
进入到**下载**页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
页面拉到最底部，点击**在线定制**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
选择图表版本及图表类型，其他的一定要默认，否则会缺少东西导致图表不能展示完全：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
最后，点击**下载**，即可进入到下载的页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]

## echart.js的使用 ##

点击**示例**，进入到**示例**  
点击想要的大致样式，进入到代码页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
切换到**完整代码**可以查看到具体的使用方式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]

import * as echarts from 'echarts'; //引入echart,可以直接使用script src引入的方式
    
    var chartDom = document.getElementById('main'); //获取dom，为了保证唯一性，最好是用id获取dom元素
    var myChart = echarts.init(chartDom);//dom元素初始化echart
    var option; //option是echart图表的属性集合
    
    option = { 
        xAxis: {  //x轴内容，里面的data可以是动态数据绑定的
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: { //y轴内容，里面的data会根据图表的数值自动生成，同时支持格式化
            type: 'value'
        },
        series: [{ //图表的数据数组，是对象数组，一个对象对应一种图表，可以是多种
            data: [150, 230, 224, 218, 135, 147, 260],//图表的数据
            type: 'line'//图表的类型，一般常用的就是线性(line) 柱形(bar)
        }]
    };
    
    option && myChart.setOption(option);//将option赋值到dom元素中，此时图表就会展示出来了

## echart.js属性的使用 ##

title: { 
        text: 'SKU数量' //标题内容
    },
    xAxis: {  //x轴
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: { 
        type: 'value',
        axisLabel: { 
            show: true,
            interval: 'auto'
        }
    },
    legend: { 
        data: ['SKU数量']
    },
    series: [
        { 
            name: 'SKU数量',
            type: 'line',
            stack: '总量',
            data: [],
            label: { 
                show: true,
                position: "top"
            },
            lineStyle: { 
                color: '#f90',
            }
        }
    ]

### x轴的类型 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]

### y轴的格式化 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]

### series统一格式化 ###

series: [
        { 
            name: '交期准时率',
            type: 'line',
            stack: '总量',
            data: [],
            label: { 
                show: true,
                position: "top",
                formatter: function (params) { 
                    return params.value + "%"
                }
            },
            lineStyle: { 
                color: '#f90',
            }
        }
    ]

### yAixs统一格式化 ###

yAxis: { 
        type: 'value',
        min: 0,
        axisLabel: { 
            show: true,
            interval: 'auto',
            formatter: (value) => { 
                return Math.ceil(value/3600)
            }
        }
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/3a3df4f0054543c18625399a6dd614e8.png
[echart.js_https_echarts.apache.org_zh_index.html]: https://echarts.apache.org/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/114cca17e3724e5686057f7b8ea7ffe2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/6161b1b770c447d18addb276a799d828.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20210725/cf224d32d61a42c7b9147bdd063f8793.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20210725/5937d58d47604a4780801bd032467c86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20210725/e13e17311ea34e45be49d582ebdc83cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20210725/fbf61708e8464fc28db1808c1342bb48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 7]: /images/20210725/699e6e59881149c186742cd96d80983a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 8]: /images/20210725/4f76003ebf9b43b5bcf98fe5868ade3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 9]: /images/20210725/208584e2fdb04783821322d04b6e43d6.png