echarts象形柱状图

效果:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>dom</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
 
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 60%;height: 40vh;"></div>
 
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
           
      
            xAxis: {
                data: ["1H", "2H", "3H", "4H", "5H", "6H","7H"],
                axisLine: { show: false },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: "#65ABE7",
                        width: 1
                    },
                },
                axisLabel: { //X轴标签
                    show: true,
                    textStyle: { 
                        color: '#65ABE7',//字体颜色
                        fontSize: 12 //字体大小
                    }
                }


            },
            yAxis: [
                {
                    name: '单位(数)',
                    type: 'value',
                    min: 0,
                    max: 1,
                    interval: 0.2,
                    axisLabel: {
                       
                        textStyle: { 
                        color: '#65ABE7',//字体颜色
                        fontSize: 12 //字体大小
                      }

                    },
                    axisTick: { show: false },
                    axisLine: { show: false }
                },
                {
                    name: '单位(率)', 
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    lineStyle: {
                       color: '#65ABE7',
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        textStyle: { 
                        color: '#65ABE7',//字体颜色
                        fontSize: 12 //字体大小
                      }

                    },
                    axisTick: { show: false },
                    axisLine: { show: false },
                    splitLine: { //Y轴分隔符
                    show: true,
                    lineStyle: {
                        color: '#65ABE7',
                     }
 
                }
 
                },
 
            ],
            series: [
            {
                    name: '未开始',
                    xAxisIndex: 0,
                    data: [0.23, 0.20, 0.34, 0.56, 0.43, 0.66, 0.84],
                    type: 'pictorialBar',
                    barGap: '-100%',
                    symbol: 'roundRect',
                    symbolRepeat: 'fixed',
                    symbolClip: true,
                    symbolSize: [16, 4],
                    label: {
                        normal: {
                            textStyle: {
                                normal: {
                                    color: '#0A9EF3',
                                },
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#0A9EF3',
                        },
                    },
                },
                {
                    yAxisIndex: 1,//根据右边轴显示
                    name: '抛料率',
                    type: 'line',
                    data: [23, 20, 34, 56, 43, 66, 84],
                    itemStyle: {
                        normal: {
                            color: '#e75e66',
                            label: {
                                show: false, //开启显示
                                formatter: '{c}%',
                                position: 'bottom', //在下方显示
                                textStyle: { //数值样式
                                    color: '#65ABE7',
                                    fontSize: 16
                                }
                            }
                        }
                    }
                }
            ]
        };



        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        }
    </script>
</body>
 
</html>

 

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页