首页 > 其他分享 >echarts 画图

echarts 画图

时间:2023-03-07 15:23:40浏览次数:24  
标签:show color 画图 xx var 100 data echarts

        var myChart = echarts.init(document.querySelector(".bar1 .chart"));

        var data = [90, 80, 75, 65, 65];
        var titlename = ["xx", "xx", "xx", "xx", "xx"];
        var valdata = ["", "", "", "", ""];
        var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
        option = {
            //图标位置
            grid: {
                top: "10%",
                left: "22%",
                bottom: "10%"
            },
            xAxis: {
                show: false
            },
            yAxis: [
                {
                    show: true,
                    data: titlename,
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",

                        rich: {
                            lg: {
                                backgroundColor: "#339911",
                                color: "#fff",
                                borderRadius: 15,
                                // padding: 5,
                                align: "center",
                                width: 15,
                                height: 15
                            }
                        }
                    }
                },
                {
                    show: true,
                    inverse: true,
                    data: valdata,
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: "#fff"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "条",
                    type: "bar",
                    yAxisIndex: 0,
                    data: data,
                    barCategoryGap: 50,
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 20,
                            color: function (params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num];
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "inside",
                            formatter: "{c}%"
                        }
                    }
                },
                {
                    name: "框",
                    type: "bar",
                    yAxisIndex: 1,
                    barCategoryGap: 50,
                    data: [100, 100, 100, 100, 100],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: "none",
                            borderColor: "#00c1de",
                            borderWidth: 3,
                            barBorderRadius: 15
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

  

 

标签:show,color,画图,xx,var,100,data,echarts
From: https://www.cnblogs.com/duixue/p/17188219.html

相关文章