image.png

设置单位到左上方:

            title: {
                // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
                subtext: unit || "(%)",
                left: 0, // 距离左边位置
                top: 0, // 距离上面位置
                subtextStyle:{ // 设置二级标题的样式
                    color:"#fff",
                    fontSize:"7px"
                }
            },

image.png

设置折线图中不一样的折线拐点.

        serise:[{
            type: 'line',
            symbol: (value, param) => {
                   // param 内返回了 折线图的一些数据信息,我的是设置最后一个点不一样,所以需要做一个判断
                   if(param.dataIndex == xData.length-1){
                    return `image://${BlueCircle}` // react 通过import引入的本地图片
                   }else{
                        return 'circle'
                   }
                },
                symbolSize: (value, param) => {
                    if(param.dataIndex == xData.length-1){
                        return 12
                       }else{
                            return 4
                       }
                },
        }]

image.png

设置图表中的标注

        series:[{
                type: 'line',
                // 图标上的标注
                markPoint: {  
                    data: [{
                      name: "",
                      value: averageData[xData.length - 1],
                      xAxis: xData.length - 1,
                      yAxis: averageData[xData.length - 1],
                      symbol:'roundRect',
                      symbolSize: [30, 19], // 宽,高值
                      symbolOffset:[25, 0], // x,y 方向上的偏移量
                      label:{
                         
                        backgroundColor:'',
                        borderRadius: 10,
                        formatter: (obj) =>{
                            let data = [
                                `{a|${parseInt(obj.data.value)}}`,
                                '{b|%}'
                            ].join('')
                            return data;
                        },
                        rich:{
                            a:{
                                fontFamily:'play_bold',
                                color:"#000",
                                fontSize: 14,
                                fontWeight:'bold',
                            },
                            b:{
                                fontFamily:'play_bold',
                                fontWeight:'bold',
                                fontSize:10,
                                color:"#000",
                                padding: [0, 0, 3, 0],
                            }
                        }
                      }
                    }]
                },
        }]

image.png

导入图例的个性图标

 legend: {
                data: [{
                name:'平均',
                icon:`image://${BlueCircle}`
                }, {
                    name:'予測結果',
                    icon:`image://${YellowCircle}`
                }],
                left: 0,
                bottom: 0,
                x:'left',
                y:'bottom',
                textStyle:{
                    color:'#fff',
                    fontSize: '10px'
                },
                itemWidth: 15,
                itemHeight: 15,
                
            },

image.png

一个柱状图的左右两端都写字儿,用一个透明的 柱子铺到另一个柱子的上面,透明的在右边写字儿,不透明的写左边

series: [
                {
                type: "bar",
                stack: 'sum',
                barWidth: 18,
                name: "已完成",
                data: [100],
                label: {
                    normal: {
                        show: true,
                        position: "insideLeft",   // 不透明的柱子字写在左边
                        formatter: "リスク低",
                        textStyle: {
                            color: "#000",
                            fontSize: "10",
                            fontWeight: 550,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#D5B12C'
                        }, {
                            offset: 1,
                            color: '#5c5331'
                        }]),

                        barBorderRadius: [0, 3, 3, 0],
                    }
                }
            },
            {
                type: "bar",
                stack: 'a2',
                barWidth: 18,
                barGap: '-100%',
                name: "2",
                data: [100],
                label: {
                        normal: {
                            show: true,
                            position: "insideRight", // 透明的柱子字写在右边
                            formatter: "リスク高",
                            textStyle: {
                                color: "#000",
                                fontSize:10,
                                fontWeight:550
                            },
                        },
                    },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(1,1,1,0)'
                        }, {
                            offset: 1,
                            color: 'rgba(1,1,1, 0)'
                        }]),
                        barBorderRadius: [0, 3, 3, 0],
                    }
                }
            }],