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

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

echart.js官网

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

echart.js下载

点击官网首页的下载： 下载>下载

进入到下载页面：

页面拉到最底部，点击在线定制

选择图表版本及图表类型，其他的一定要默认，否则会缺少东西导致图表不能展示完全：

最后，点击下载，即可进入到下载的页面：

echart.js的使用

点击示例，进入到示例
点击想要的大致样式，进入到代码页面：

切换到完整代码可以查看到具体的使用方式：

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轴的类型

y轴的格式化

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)
        }
    }
},