172Echarts - 象形柱图(Dotted bar)

简介: 172Echarts - 象形柱图(Dotted bar)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      // Generate data
      var category = [];
      var dottedBase = +new Date();
      var lineData = [];
      var barData = [];
      for(var i = 0; i < 20; i++) {
        var date = new Date(dottedBase += 3600 * 24 * 1000);
        category.push([
          date.getFullYear(),
          date.getMonth() + 1,
          date.getDate()
        ].join('-'));
        var b = Math.random() * 200;
        var d = Math.random() * 200;
        barData.push(b)
        lineData.push(d + b);
      }
      // option
      option = {
        backgroundColor: '#0f375f',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['line', 'bar'],
          textStyle: {
            color: '#ccc'
          }
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [{
          name: 'line',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 15,
          data: lineData
        }, {
          name: 'bar',
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                    offset: 0,
                    color: '#14c8d4'
                  },
                  {
                    offset: 1,
                    color: '#43eec6'
                  }
                ]
              )
            }
          },
          data: barData
        }, {
          name: 'line',
          type: 'bar',
          barGap: '-100%',
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(20,200,212,0.5)'
                  },
                  {
                    offset: 0.2,
                    color: 'rgba(20,200,212,0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(20,200,212,0)'
                  }
                ]
              )
            }
          },
          z: -12,
          data: lineData
        }, {
          name: 'dotted',
          type: 'pictorialBar',
          symbol: 'rect',
          itemStyle: {
            normal: {
              color: '#0f375f'
            }
          },
          symbolRepeat: true,
          symbolSize: [12, 4],
          symbolMargin: 1,
          z: -10,
          data: lineData
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
Echarts实战案例代码(8):设置itemStyle渐变color属性实现柱图的伪3D效果的解决方案
278 0
|
1月前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
52 1
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
267 1
|
数据可视化
2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图
2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图
87 0
174Echarts - 象形柱图(Wish List and Mountain Height)
174Echarts - 象形柱图(Wish List and Mountain Height)
38 0
174Echarts - 象形柱图(Wish List and Mountain Height)
177Echarts - 象形柱图(Velocity of Christmas Reindeers)
177Echarts - 象形柱图(Velocity of Christmas Reindeers)
30 0
176Echarts - 象形柱图(Vehicles)
176Echarts - 象形柱图(Vehicles)
29 0
175Echarts - 象形柱图(Spirits)
175Echarts - 象形柱图(Spirits)
69 0
173Echarts - 象形柱图(Expansion of forest)
173Echarts - 象形柱图(Expansion of forest)
38 0
171Echarts - 象形柱图(Water Content)
171Echarts - 象形柱图(Water Content)
30 0

热门文章

最新文章