40Echarts - 柱状图(Bar Simple)

简介: 40Echarts - 柱状图(Bar Simple)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
5月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
187 0
|
2月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
97 0
|
3月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
254 0
|
4月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
52 0
|
5月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
697 0
|
10月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
10月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
11月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
211 0
|
11月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
228 0

热门文章

最新文章

下一篇
无影云桌面