Echarts折线图绑定动态数据 x轴当前时间 y轴百分比刻度 toolbox使用

项目中难免遇到将数据绑定至图表，这时候就可以使用echarts控件。
博主近期在项目中，需要将服务器CPU和内存使用率做成一张折线图，要用到绑定动态数据，于是在网上查阅后发现echarts官网中的实例都是死数据，问题解决后写了这篇博客分享给大家。

内含绑定动态数据，toolbox的使用，x轴绑定当前时间，设置多长时间刷新，y轴刻度百分比，多条折线显示隐藏等，尽可能写全一些。

---

实现的效果和任务管理器性能中的CPU内存使用率相似，如下

实现的服务器CPU和内存使用率效果图如下

---

一、首先需要引用echarts插件

echarts插件可以到官网下载，附上传送门，博主下载的是2.2M的源代码，下载完成后解压引用。

<script src="~/Scripts/echarts.js"></script>

博主这里先在html页面写上折线图表参数，x轴y轴的数据留空，在创建的封装js中使用异步加载设置参数赋值绑定。

二、设置基本图表

在html页面先图表的基本属性设置好，x轴y轴数据留空。
emmmm，这里加上比较详细的注释，方便大家理解。

    //初始化echarts对象，使id为totalRun
    var myChart = echarts.init(document.getElementById('totalRun'));
    //选项
    option = {
        //设置背景颜色
        backgroundColor: '#00cccc',
        //标题
        title: {
            text: '服务器运行情况监测',
            textStyle: {
                //设置主标题颜色
                color: '#ff0000'
            }
        },
        //提示框
        tooltip: {
            trigger: 'axis'//当trigger为’item’时只会显示该点的数据,为’axis’时显示该列下所有坐标轴所对应的数据
        },
        //图例
        legend: {
            data: arrtitle
        },
        //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
        toolbox: {
            show: true,
            //toolbox的配置项
            feature: {
                //辅助线的开关
                mark: { show: true },
                //数据视图
                dataView: {
                    show: true,
                    readOnly: false
                },
                //动态类型切换
                magicType: {
                    show: true,
                    //line为折线图，bar为柱状图
                    type: ['line', 'bar']
                },
                //配置项还原
                restore: { show: true },
                //将图标保存为图片
                saveAsImage: { show: true }
            }
        },
        //可计算特性
        calculable: true,
        //x轴样式
        xAxis: [
            {
                //设置类别