uniapp 插件 easyEcharts图表

黑色滴夜

简易echarts纯JS绘制，雷达图，折线图，柱状图，饼图，仪表盘，环形图，水球，拓扑图，地图，性能优越，温度计




折线图

[JavaScript] 纯文本查看 复制代码

let grid = {
        top: (12 * elem.height) / 100, //canvas标签的高度的12%（相对总高的百分比）
        bottom: ((100 - 18) * elem.height) / 100, //canvas图形距离底部的百分比 18%
        left: (12 * elem.width) / 100, //距离左侧的百分比（12%总宽度）
        right: ((100 - 8) * elem.width) / 100 //距离右侧百分比（8%总宽度）
    },
    lineColor = "#999", //x,y轴线颜色
    fillColor = "#333", //x,y轴number颜色
    yAxis = {
        textSize: 10, //刻度数字fontSize
        maxNumber: 80, //分段的最大值
        splitNumber: 5, //分成几段
        splitLen: 5, //轴左侧的小横线 -|
        marginSplit: 5 //刻度文字与 “-|”的距离  
    },
    lineWidth = 1,
    xAxis = {
        textSize: 10, //刻度数字fontSize
        maxNumber: 50,
        splitNumber: 5,
        splitLen: 5,
        marginSplit: 5
    },
    dotStyle = [{
        color: "#fff",
        arcR: 4, //半径
        dash: 0 //是否线条虚线 0实线 1以上虚线
    },
    {
        color: "#fff",
        arcR: 4, //半径
        dash: 0 //是否线条虚线 0实线 1以上虚线
    }],
    lineStyle = [{
        color: "#4caf50",
        lineDotType: "wave", //两圆点的连接线 line直线，wave二次贝塞尔曲线
        width: 2, //连线的width
        dash: 3 //是否线条虚线 0实线 1以上虚线
    },
    {
        color: "#03a9f4",
        lineDotType: "wave", //两圆点的连接线 line直线，wave二次贝塞尔曲线
        width: 2, //连线的width
        dash: 0 //是否线条虚线 0实线 1以上虚线
    }],
    dataJSON = [//月份数据，字符类型
    {
        x: ["1月", "3月", "5月", "9月", "10月", "12月"],//设置字符类型，非Number
        y: [69, 28, 70, 65, 76, 65]
    },
    {
        x: ["1月", "3月", "5月", "9月","10月","12月"],//非Number类型数据复制第一条x的数据
        y: [9, 18, 70, 75, 56, 35]
    }  
    ];
    二者数据类型只能选一种
    dataJSON = [ //数据data number类型数据
        {
            x: this.sortFn([10, 30, 35, 39, 45, 28]),//sortFn是封装的排序方法
            y: [69, 28, 70, 65, 76, 65]
        },
        {
            x: this.sortFn([5, 23, 45, 39, 50, 28]),
            y: [9, 18, 70, 75, 56, 35]
        }
    ];

插件市场地址: https://ext.dcloud.net.cn/plugin?id=4320