ECharts初体验

最新推荐文章于 2022-04-22 18:54:40 发布

CiBa-YAO

最新推荐文章于 2022-04-22 18:54:40 发布

阅读量348

点赞数 1

分类专栏： ECharts 文章标签： ECharts JavaScript

本文链接：https://blog.csdn.net/yaozhiqi1905658804/article/details/55213637

版权

ECharts 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

看到比较新颖的技术就想尝试一下的我今天看到了ECharts，这是百度团队开源的一个图表js插件

1.下载echarts.js

从官方下载地址选择你需要的版本下载，我下载的是源代码，比较大2.19M
引入echarts.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
</head>
</html>

2.生成一个柱状图

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <!-- 引入 ECharts 文件 -->
      <script src="js/echarts.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 = {
              title: {
                  text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
              }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
      </script>
  </body>
</html>

效果图如下：

3.用到的方法详解

title.text | string
[ default: ” ]
主标题文本，支持使用 \n 换行。

legend.data[i] | Object
图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动获取对应系列的颜色，图形标记（symbol）作为自己绘制的颜色和标记，特殊字符串 ”（空字符串）或者 ‘\n’（换行字符串）用于图例的换行。
如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
示例

data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
        color: 'red'
    }
}]

xAxis.data[i] | Object
类目数据，在类目轴（type: ‘category’）中有效。
示例：

// 所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']

series[i]-bar | Object
柱状/条形图
柱状/条形图通过柱形的高度/条形的宽度来表现数据的大小，用于有至少一个类目轴或时间轴的直角坐标系上。
series[i]-bar.data[i] | Object
系列中的数据内容数组。数组项通常为具体的数据项。
通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。

series: [{
    data: [
        // 维度X   维度Y   其他维度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 与 xAxis.data 一一对应。
    data: [23,  44,  55,  19]
    // 它其实是下面这种形式的简化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

CiBa-YAO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts初体验

看到比较新颖的技术就想尝试一下的我今天看到了ECharts，这是百度团队开源的一个图表js插件1.下载echarts.js从官方下载地址选择你需要的版本下载，我下载的是源代码，比较大2.19M 引入echarts.js<!DOCTYPE html><html><head> <meta charset="utf-8">  <sc
复制链接

扫一扫