边框切割图片

Echarts底层依赖矢量图形库ZRender

Echarts基本使用

1. 下载并引入echarts.js 文件 —> 图表依赖这个js库
2. 准备一个具备大小的DOM容器 —> 生成的图表会放入这个容器内
3. 初始化echarts实例对象 —> 实例化echarts对象
4. 指定配置项和数据（option） —> 根据具体需求修改配置选项
5. 将配置项设置给echarts实例对象 —> 让echarts对象根据修改好的配置生效

stack 取值相同会造成数据累加

series:[
    {
        name:'第一',
        type:'line',
        stack:'数据',
        data:[200,100,300]
    },
    {
        name:'第二',
        type:'line',
        stack:'数据',
        data:[300,100,111]
    }
]
/* 
stack 相同 则系列2（第二）数据是data累加上一个的结果
不用stack 或 设置不同名字 即可
*/

https://blog.csdn.net/cwq521o/article/details/113086071

边框图片

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成

九宫格四个角切出去

>语法<   
border-image-source   ---用在边框的图片的路径。（哪个图片）
border-image-slice   ---图片边框向内偏移。（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width  ---图片边框的宽度（需要加单位）（不是边框的宽度是边框图片的宽度）
border-image-repeat  ---图片边框是否平铺（repaet）、铺满（round）或拉伸（stretch）默认拉伸

图表等比缩放

window.addEventListener('resize',function(){
    mycharts.resize();
})