203Echarts - 数据集(Simple Example of Dataset)

简介: 203Echarts - 数据集(Simple Example of Dataset)
效果图

源代码
<!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;
      option = {
          legend: {},
          tooltip: {},
          dataset: {
              source: [
                  ['product', '2015', '2016', '2017'],
                  ['Matcha Latte', 43.3, 85.8, 93.7],
                  ['Milk Tea', 83.1, 73.4, 55.1],
                  ['Cheese Cocoa', 86.4, 65.2, 82.5],
                  ['Walnut Brownie', 72.4, 53.9, 39.1]
              ]
          },
          xAxis: {type: 'category'},
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
              {type: 'bar'},
              {type: 'bar'},
              {type: 'bar'}
          ]
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
242Echarts - 3D 散点图(3D Scatter with Dataset)
242Echarts - 3D 散点图(3D Scatter with Dataset)
154 0
228Echarts - 3D 柱状图(3D Bar with Dataset)
228Echarts - 3D 柱状图(3D Bar with Dataset)
83 0
209Echarts - 数据集(Share Dataset)
209Echarts - 数据集(Share Dataset)
30 0
204Echarts - 数据集(Dataset in Object Array)
204Echarts - 数据集(Dataset in Object Array)
33 0
66Echarts - 饼图(Share Dataset)
66Echarts - 饼图(Share Dataset)
51 0
54Echarts - 柱状图(Dataset in Object Array)
54Echarts - 柱状图(Dataset in Object Array)
45 0
28Echarts - 折线图(Share Dataset)
28Echarts - 折线图(Share Dataset)
53 0
|
存储 JSON 数据可视化
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
81 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
514 0