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>
目录
相关文章
|
7月前
242Echarts - 3D 散点图(3D Scatter with Dataset)
242Echarts - 3D 散点图(3D Scatter with Dataset)
38 0
|
7月前
228Echarts - 3D 柱状图(3D Bar with Dataset)
228Echarts - 3D 柱状图(3D Bar with Dataset)
25 0
|
7月前
209Echarts - 数据集(Share Dataset)
209Echarts - 数据集(Share Dataset)
16 0
|
7月前
204Echarts - 数据集(Dataset in Object Array)
204Echarts - 数据集(Dataset in Object Array)
15 0
|
7月前
66Echarts - 饼图(Share Dataset)
66Echarts - 饼图(Share Dataset)
18 0
|
7月前
54Echarts - 柱状图(Dataset in Object Array)
54Echarts - 柱状图(Dataset in Object Array)
14 0
|
7月前
28Echarts - 折线图(Share Dataset)
28Echarts - 折线图(Share Dataset)
17 0
|
存储 JSON 数据可视化
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
【中级ECharts技术】前端框架ECharts的dataset 管理数据对数据可视化的高级dataset 管理
|
5天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
64 0
|
5天前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
33 0