• 显示暂无数据

graphic: {
    type: 'text', // 类型：文本
    left: 'center',
    top: 'middle',
    silent: true, // 不响应事件
    invisible: false, // 有数据就隐藏
    style: {
        fill: '#9d9d9d',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px'
    }
}

• 环形图配置圆环大小

series: [{
    name: '',
    type: 'pie',
    radius: ['35%', '65%']
}]

• 环形图标题显示百分数

var chart3PrepareData = [{                        'proportion': normalProportion,                        'name': '正常'                    },                    {                        'proportion': hypertensionProportion,                        'name': '高血压'                    }                ]
legend: {
            top: '2%',
            left: 'center',
            icon: "circle",
            formatter: name => {
                let params1
                // 图例的 69.43%，150832，name是图例文字描述，for循环是格式化
                for (let i = 0, len = chart3PrepareData.length; i < len; i++) {
                    if (chart3PrepareData[i]['name'] == name) {
                        params1 = chart3PrepareData[i]['proportion'];
                    };
                };
                let arr = [                    name + ' ',                    params1,                ];
                return arr.join('');
            }
        }

• 环形图的options

function initChart3(canvas, width, height, dpr) {
    chart3 = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart3);

    var option = {
        title: {

        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            top: '2%',
            left: 'center',
            icon: "circle",
            formatter: name => {
                let params1
                // 图例的 69.43%，150832，name是图例文字描述，for循环是格式化
                for (let i = 0, len = chart3PrepareData.length; i < len; i++) {
                    if (chart3PrepareData[i]['name'] == name) {
                        params1 = chart3PrepareData[i]['proportion'];
                    };
                };
                let arr = [                    name + ' ',                    params1,                ];
                return arr.join('');
            }
        },
        color: ['#2BCE6C', '#FF6565'],
        series: [{
            name: '',
            type: 'pie',
            radius: ['35%', '65%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center',
                formatter: '{d}%'
                // normal: {
                //     show: true,
                //     position: 'inside', //标签的位置
                //     textStyle: {
                //         fontWeight: 300,
                //         fontSize: 14 //文字的字体大小
                //     },
                //     formatter: '{d}%'
                // }
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                    value: '',
                    name: '正常'
                },
                {
                    value: '',
                    name: '高血压'
                },
            ]
        }]
    };

    chart3.setOption(option);
    return chart3;
}

• 折线图的options

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);

    var option = {
        backgroundColor: '#fff',
        title: {
            text: '',
            left: 'center',
        },
        color: ['rgb(43,206,108)', 'rgb(92,107,244)', 'rgb(255,101,101)'],
        legend: {
            data: [' 收缩压(mmHg)', ' 舒张压(mmHg)', '  心 率(次/分钟)'],
            top: 10,
            left: 'center',
            backgroundColor: '',
            z: 100,
            formatter: function (val) {
                return val.replace(/\(/g, '\n(')
            },
        },

        grid: {
            containLabel: true,
            show: true,
            height: 260,
            shadowColor: '#fff',
        },
        tooltip: {
            show: true,
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            // show: false,
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['rgb(209,211,241)'],
                    width: 1,
                    type: 'solid'
                }
            },
            // splitArea : {show : true},//保留网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: 'rgb(209,211,241)', //左边线的颜色
                    width: '1' //坐标线的宽度
                },

            },
            axisLabel: {
                textStyle: {
                    color: 'rgb(59,71,52)', //坐标值得具体的颜色
                }
            },
        },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgb(209,211,241)'],
                    width: 1,
                    type: 'solid'
                }
            },
            // splitArea : {show : true},//保留网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: 'rgb(209,211,241)', //左边线的颜色
                    width: 1 //坐标线的宽度
                },
                show: true
            },
            axisLabel: {
                textStyle: {
                    color: 'rgb(59,71,52)', //坐标值得具体的颜色
                }
            },
            minInterval: 30
            // show: false
        },
        series: [{
            name: ' 收缩压(mmHg)',
            type: 'line',
            smooth: true,
            data: [],

        }, {
            name: ' 舒张压(mmHg)',
            type: 'line',
            smooth: true,
            data: []
        }, {
            name: '  心 率(次/分钟)',
            type: 'line',
            smooth: true,
            data: []
        }],
        graphic: {
            type: 'text', // 类型：文本
            left: 'center',
            top: 'middle',
            silent: true, // 不响应事件
            invisible: false, // 有数据就隐藏
            style: {
                fill: '#9d9d9d',
                fontWeight: 'bold',
                text: '暂无数据',
                fontFamily: 'Microsoft YaHei',
                fontSize: '18px'
            }
        }
    };
    



    chart.setOption(option);
    return chart;
}

• 小程序中使用echarts

1. 定义dom

<view class="echarts-container">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"> </ec-canvas>
</view>

2. data中定义

ec: {
    onInit: initChart
}

3. 文件全局生命chart变量，定义initChart函数

4. 拿到数据之后，动态赋值并重新绘制图表

    let option = chart.getOption()
    option.xAxis[0].data = res.data.dateList
    chart.setOption(option)