效果图

image.png

截取做网页中的部分代码

html

<div id="data_1" >
                <div class="echart" id="echart_1"></div>
 </div>

js(引用：echarts.min.js)

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart_1"));
    // 指定图表的配置项和数据
    var option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            top: '5%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['china',' china', 'china', 'china', 'china', 'china', 'china', 'china', 'china', 'china'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: '12'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#094551',
                }
            },
            splitLine: {
                show: false,
            }
        },
        yAxis: {
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#094551',
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#094551',
                }
            }
        },
        series: [{
            name: '各省市完成率',
            type: 'bar',
            barWidth: '22',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#009CFF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#00E5E9' // 100% 处的颜色
                    }], false),
                }
            },
            data: [230, 190, 170, 150, 140, 130, 120, 110, 100, 90]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

css样式

#data_1{
height:200px; width:500px;
}
.echart{
width:100%;height:100%;
}