echarts 柱状图

最新推荐文章于 2024-04-28 08:58:33 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-04-28 08:58:33 发布

阅读量227

点赞数

分类专栏： echarts 使用文章标签： echarts

本文链接：https://blog.csdn.net/qq_37550440/article/details/116712763

版权

echarts 使用专栏收录该内容

15 篇文章 0 订阅

订阅专栏

原始效果图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts.common.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 400px;height:300px;background-color: #eeee;"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
      var  option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
    legend: {
        data: ['整改', '已整改'],
        itemWidth: 10, 
        // 修改说明字体颜色
        textStyle: {
            color: '#FFFFFF',
            fontSize: 10
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {  // 设置x轴样式
              fontSize: 12, 
              color: 'red'
          },
        }
    ],
    yAxis: [
        {
          name: '单位: XX',
          type: 'value',
          nameTextStyle: { // 设置Y轴样式
            fontSize: 12,
            color: '#ffffff'
          },
        }
    ],
    series: [
        {
            name: '整改',
            barWidth: 20,
            type: 'bar', // 设置柱体宽度
            stack: '广告',
            emphasis: {
                focus: 'series',
            },
            data: [10, 20, 30, 40, 50, 30, 30]
        },
        {
            name: '已整改',
            barWidth: 20,
            type: 'bar',
            stack: '广告',
            emphasis: {
                focus: 'series'
            },
            data: [10, 20, 30, 40, 50, 30, 30]
        },
    ]
      };

 myChart.setOption(option);
 
</script>
</body>
</html>

改动后效果图：

var xAxisData = [];
                var data1 = [];
                var data3 = [];
                for (var i = 0; i < 10; i++) {
                    xAxisData.push('Class' + i);
                    data1.push((Math.random() * 2).toFixed(2));
                    data3.push((Math.random() + 0.3).toFixed(2));
                }
                var emphasisStyle = {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0,0,0,0.3)'
                    }
                };
                let option1 = {
                      // 定制图例
                    legend: {
                        data: ['bar', 'bar2', 'bar3', 'bar4'],
                        type: 'scroll',
                        x: 'right',
                        y: 'top',
                        orient: 'vertical',
                        top: 30,
                        textStyle: {
                            color: '#606060',
                            fontSize: 12,
                        },
                        borderColor: '#e5e5e5',
                        borderWidth: 1,
                        borderRadius: 5,
                        backgroundColor: '#f7f7f7',
                        itemWidth: 18,
                        itemHeight: 11,
                        padding: 15
                    },
                    brush: {
                        toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                        xAxisIndex: 0
                    },
                    tooltip: {},
                    xAxis: {
                        data: xAxisData,
                        name: 'X Axis',
                        axisLine: {onZero: true},
                        splitLine: {show: false},
                        splitArea: {show: false}
                    },
                    yAxis: {},
                    grid: {
                        bottom: 100
                    },
                    series: [
                        {
                            name: 'bar',
                            type: 'bar',
                            stack: 'one',
                            emphasis: emphasisStyle,
                            data: data1,
                            barWidth : 16,//柱图宽度
                            //定制当前item的样式
                            itemStyle : {
                                normal: {
                                    color:'red', //当前item的颜色
                                    barBorderRadius: 50, //当前item的圆角
                                },
                            }
                        },
                        {
                            name: 'bar3',
                            type: 'bar',
                            stack: 'two',
                            emphasis: emphasisStyle,
                            data: data3
                        },
                    ]
                };

                var chartDom = document.getElementById('echart1');
                var myChart = echarts.init(chartDom);
                myChart.setOption(option1);
                myChart.on('brushSelected', renderBrushed);

                function renderBrushed(params) {
                    var brushed = [];
                    var brushComponent = params.batch[0];

                    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
                        var rawIndices = brushComponent.selected[sIdx].dataIndex;
                        brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
                    }

                    myChart1.setOption({
                        title: {
                            backgroundColor: '#333',
                            text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                            bottom: 0,
                            right:'10%',
                            width: 100,
                            textStyle: {
                                fontSize: 12,
                                color: '#fff'
                            }
                        }
                    });
                }

`dataZoom` 组件用于区域缩放

dataZoom: {

type: "inside",

startValue: 0,

endValue: 10

流氓也是种气质 _Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts 柱状图

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫