echarts用自定义系列做柱状图，按基线分割并渲染不同颜色

最新推荐文章于 2024-09-18 11:03:49 发布
不想当技术大佬的程序员不是好程序员
最新推荐文章于 2024-09-18 11:03:49 发布
阅读量1.3k
点赞数 1
分类专栏： echarts 自定义系列文章标签： echarts 按基线截断渲染不同颜色
本文链接：https://blog.csdn.net/qq_41888583/article/details/100879169
版权
自定义系列同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
echarts
0 篇文章 0 订阅
订阅专栏
效果如下
二话不说，直接上代码
<html>

<body>
    <div id="demo"></div>
    <style>
        #demo,#demo2 {
            width: 800px;
            height: 500px;
            border: 1px saddlebrown solid;
            margin: 0 auto
        }
    </style>
</body>

<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.3.0-rc.1/echarts-en.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript">
    // 去重
    function qc(arr){
        let x = new Set(arr);
        return [...x];
    }
    let myChart = echarts.init(document.getElementById('demo'));
    let dataCount = 10;
    let startTime = +new Date();

    let data = []
    let categories = []
    //假数据
    let datas = [
        {
            timeInfo:[
                {
                    name:'张三',
                    value:[
                        0,
                        3,
                        4,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                },
                {
                    name:'张三',
                    value:[
                        0,
                        10,
                        13,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                },
                {
                    name:'张三',
                    value:[
                        0,
                        14,
                        15,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                },
            ]
        },
        {
            timeInfo:[
                {
                    name:'王五',
                    value:[
                        0,
                        1,
                        16,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                },
            ]
        },
        {
            timeInfo:[
                {
                    name:'李四',
                    value:[
                        0,
                        10,
                        15,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                },
                {
                    name:'李四',
                    value:[
                        0,
                        2,
                        8,
                        0
                    ],
                    itemStyle:{
                        normal:{
                            color:'',
                        }
                    }
                }
            ]
        },
    ]
    for (let j = 0; j < datas.length; j++){
        categories.push(datas[j].name)
        categories = qc(categories)
    }
    // Generate mock datas
    echarts.util.each(datas,  (category, index)=>{

        for (let i = 0; i < datas[index].timeInfo.length; i++) {
            let initTime = datas[index].timeInfo[i].value[1]         //每个数据的初始值
            let baseTime = initTime;
            let duration = datas[index].timeInfo[i].value[2] - datas[index].timeInfo[i].value[1]    
            let changeColor = datas[index].timeInfo[i]
            data.push({
                name: datas[index].timeInfo[i].name,
                value: [
                    index,
                    baseTime,           
                    baseTime += duration,
                    duration,
                ],
                itemStyle: {
                    normal: {
                        color: 'blue',
                    }
                }
            })
        }

    });
    let s = 6
    let e = 13.5
    let everyOneValue = ''
    for (let j = 0; j < data.length; j++) {
        console.log('遍历',data[j]);
        everyOneValue = data[j].value
        if (everyOneValue[1]<s && everyOneValue[2]<s) {
            data[j].itemStyle.normal.color = 'red'
        }
        if (everyOneValue[1]>e && everyOneValue[2]>e) {
            data[j].itemStyle.normal.color = 'red'
        }
        if (everyOneValue[1]<s && s<everyOneValue[2]) {
            data.splice(j,1,{
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        everyOneValue[1],
                        s,
                        s-everyOneValue[1]
                    ],
                    itemStyle:{
                        normal:{
                            color:'red'
                        }
                    }
                },
                {
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        s,
                        everyOneValue[2],
                        everyOneValue[2]-s
                    ],
                    itemStyle:{
                        normal:{
                            color:'blue'
                        }
                    }
                })
        }

        if (everyOneValue[1]<e && e<everyOneValue[2]) {
            data.splice(j,1,{
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        everyOneValue[1],
                        e,
                        e-everyOneValue[1]
                    ],
                    itemStyle:{
                        normal:{
                            color:'blue'
                        }
                    }
                },
                {
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        e,
                        everyOneValue[2],
                        everyOneValue[2]-e
                    ],
                    itemStyle:{
                        normal:{
                            color:'red'
                        }
                    }
                }
            )
        }

        if (everyOneValue[1]<s && e<everyOneValue[2]) {
            data.splice(j,1,{
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        everyOneValue[1],
                        s,
                        s-everyOneValue[1]
                    ],
                    itemStyle:{
                        normal:{
                            color:'red'
                        }
                    }
                },
                {
                    name:data[j].name,
                    value:[
                        everyOneValue[0],
                        everyOneValue[2],
                        e,
                        e-everyOneValue[2]
                    ],
                    itemStyle:{
                        normal:{
                            color:'red'
                        }
                    }
                })
        }
    }
    //console.log('data',data);
    
       
    function renderItem(params, api) {
        // 对于 data 中的每个 data，都会调用这个 renderItem 函数。
        // （但是注意，并不一定是按照 data 的顺序调用）
        // 这里进行一些处理，例如，坐标转换。
        // 这里使用 api.value(0) 取出当前 data 中第一个维度的数值。
        let categoryIndex = api.value(0);
        // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
        let start = api.coord([api.value(1), categoryIndex]);
        let end = api.coord([api.value(2), categoryIndex]);
        // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。
        let height = api.size([0, 1])[1] * 0.6;
        // rectShape 属性描述了这个矩形的像素位置和大小。
        // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，
        // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。
        let rectShape = echarts.graphic.clipRectByRect({
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        }, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });
        return rectShape && {
            type: 'rect',
            shape: rectShape,
            style: api.style()
        };
    }
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: 'red'
              }
            }
        },
        title: {
            text: 'Profile',
            left: 'center'
        },
        dataZoom: [{
                type: 'inside',
                xAxisIndex: 0,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }
        ],
        xAxis: {
            min: 0,
            scale: true,
            axisLabel: {
                fontSize: 15,
                formatter: function (val) {
                    return Math.max(0, val - 0) + ' ms';
                }
            },
        },
        yAxis: {
            data: ['张三','王五','李四']
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            markLine: {
              silent :false,
              symbol:"none",                  //去掉警戒线最后面的箭头
              type:"solid",   
              lineStyle: {
                // 标线样式
                normal: {
                  color: 'red'                   // 这儿设置安全基线颜色
                }
              },
              label:{    //标线的文本
                show:true,
              },
              data: [
                {
                  xAxis: 6
                },
                {
                  xAxis: 13.5
                },
              ],
            },
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
    myChart.setOption(option);

   

</script>
</html>