Echarts学习笔记

最新推荐文章于 2023-10-24 12:10:03 发布

A_bad_boy_hahaha

最新推荐文章于 2023-10-24 12:10:03 发布

阅读量1k

点赞数 1

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/A_bad_boy_hahaha/article/details/112977649

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Echarts学习笔记

一、使用Echarts

a、在官方网站中挑选合适的版本进行下载

完全版（echarts.js）：体积最大，包含所有的图表和组件；
常用版（echarts.common.js）：体积适中，包含常见的图表和组件；
精简版（echarts.simple.js）：体积较小，仅包含最常用的图表和组件；

b、使用 npm install echarts -S安装echarts库。

二、echarts的组件

Title组件：标题组件，包含了主标题和副标题
Tooltip组件：提示框组件，鼠标交互时的信息提示
Toolbox组件：工具箱组件，每个图表最多有一个工具箱
Legend组件：图例组件，每个图表最多有一个图例，混搭图表共享
xAxis组件：直角坐标系中的横轴数组，数组的每一项代表一条横轴坐标轴，标准(1.0)中规定最多同时存在2条横轴
yAxis组件：直角坐标系中的纵轴数组，数组的每一项代表一条纵轴坐标轴，标准(1.0)中规定最多同时存在2条纵轴
series组件：驱动表生成的数据内容，数组中的每一项代表一个系列的特殊选项及数据

Echarts工具的6个公共组件包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射。下面介绍第一个公共组件title标题。

1、title组件详解

属性	属性值
id	组件id。默认不指定。指定则可用于option或者API中引用组件
show	是否显示标题组件
text	主标题文本
subtext	副标题文本
link	主题文本超链接
sublink	副标题文本超链接
target	主标题：‘blank’:(默认)新窗口打开 ‘self’：当前窗口打开
subtarget	副标题：‘blank’:(默认)新窗口打开 ‘self’：当前窗口打开
textStyle	内含主标题样式的相关设置
textStyle.color	主标题文字的颜色
textStyle.fontStyle	主标题文字的字体的风格
textStyle.fontWeight	主标题文字字体的粗细
textStyle. fontFamily= ‘sans-serif’	主标题文字的字体系列
textStyle. fontSize	主标题文字的文字大小
textStyle. lineHeight	主标题文字的行高
textStyle. textBorderColor	主标题文字本身的描边颜色
textStyle. textBorderWidth	主标题文字本身的描边宽度
textStyle. textShadowColor = ‘transparent’	主标题文字本身的阴影颜色（默认透明）
textStyle. textShadowBlur	主标题文字本身的阴影宽度
textStyle. textShadowOffsetX	主标题文字本身的阴影X偏移
textStyle. textShadowOffsetY	主标题文字本身的阴影Y偏移
subtextStyle	内含副标题样式的相关设置，设置方法与主标题方法基本相同，只需要将相关配置项的`textStyle`改为`subtextStyle`
itemGap = 10	主标题与副标题的距离
left = ’20’	title组件距离容器左侧的距离
top = ‘auto’	title组件距离容器上侧的距离
right = ‘auto’	title组件距离容器右侧的距离
bottom = ‘auto’	title组件距离容器下侧的距离
backgroundColor = ‘transparent’	标题背景色（默认透明）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>标题</title>
  </head>
  <body>
    <div id="d1" style="width: 400px; height: 400px"></div>
    <script
      type="text/javascript"
      src=" https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"
    ></script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("d1")); //初始化画布

      option = {
        title: {
          // show:false,    //是否显示标题组件
          text: "echarts实例", //主标题文本内容
          subtext: "numberOne ", //副标题文本
          link: "./交通枢纽/index.html", //主题文本的超链接
          //内含主标题的相关设置
          textStyle:{
            color:"red",
            fontSize:20,
            // fontStyle:'italic',
            fontWeight:'bolder',
            lineHeight:30,
            textBorderColor:'blue',
            textBorderWidth:5,
            textShadowColor:'yellow',
            textShadowBlur:5,
            textShadowOffsetX:5,
            textShadowOffsetY:5
          },
          //内含副标题的样式设置
          subtextStyle:{
            color:"red",
          },
          itemGap:30,
          left:30,
          top:30,
          right:30,
          bottom:30,
          backgroundColor:'pink'
        },


        
        grid: { show: "true", borderWidth: "1" },
        calculable: false,
        tooltip: {
          trigger: "axis",
          formatter: "Total : <br/>{b} : {c}万人次",
        },

        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 5,
          max: 14,
          axisLabel: {
            formatter: "{value}万",
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: [8.2, 9.3, 9.1, 9.4, 9.5, 10, 9.5],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

2、tooltip(提示框)详解

概述
- 提示框可以设置在多种地方
  - 可以设置在全局，即tooltip
  - 可以设置在坐标系中，即grid.tooltip、popar.tooltip、single.tooltip
  - 可以设置在系列中，即series.tooltip
  - 可以设置在每一个数据项中，即series.data.tooltip
- 下面是tooltip的部分参数的取值及含义
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CcncYPaa-1611279501133)(https://www.shulanxt.com/wp-content/uploads/2020/08/image-332.png#align=left&display=inline&height=844&margin=%5Bobject%20Object%5D&originHeight=844&originWidth=602&status=done&style=none&width=602)]
解析常用的tooltip属性
- 提示内容对齐方式：`textStyle````javascript
  textStyle:{
  align:‘left’
  }
  //tooltip的align的值可以有“center”、left、right，分别代表“居中对
  //齐“、“左对齐”、“右对齐”。


   - 提示框的触发方式：`trigger````
tooltip的trigger的值可以有’item’、’axis’。

‘item’:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
‘axis’:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用

提示框的触发条件：tooltip.triggerOn| mousemove | 鼠标移动时触发 |
| :—: | :—: |
| click | 鼠标点击时触发 |
| mousemove|click | 同时鼠标移动和点击时触发 |
| none | 不在 ‘mousemove’ 或 ‘click’ 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。 |
提示框的格式：formatter（主要有字符串模板和自定义模板）
- 字符串模板```
  模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）


      - 自定义函数```
回调函数格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一个参数 params 是 formatter 需要的数据集。

格式如下：

{
     componentType: 'series',
     // 系列类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 系列名称
     seriesName: string,
     // 数据名，类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项
     data: Object,
     // 传入的数据值
     value: number|Array,
     // 数据图形的颜色
     color: string,

     // 饼图的百分比
     percent: number,

 }
在 trigger 为 ‘axis’ 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且，

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 坐标轴 encode 映射信息，
    // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然为数组，不会为 null/undefied，表示 dimension index 。
    // 其内容如：
    // {
    //     x: [2] // dimension index 为 2 的数据映射到 x 轴
    //     y: [0] // dimension index 为 0 的数据映射到 y 轴
    // }
    encode: Object,
    // 维度名列表
    dimensionNames: Array<String>,
    // 数据的维度 index，如 0 或 1 或 2 ...
    // 仅在雷达图中使用。
    dimensionIndex: number,
    // 数据图形的颜色
    color: string,

}
第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。

第三个参数 callback 是异步回调.

在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

3、lengend详解

1、可做模板显示

legend={

    show:true,  //是否显示

    zlevel:0,  //所属图形的Canvas分层，zlevel大的Canvas会放在zlevel小的Canvas的上面

    z:2,  //所属组件的z分层，z值小的图形会被z值大的图形覆盖

    left:"center",  //组件离容器左侧的距离,'left','center','right','20%'

    top:"top",  //组件离容器上侧的距离,'top','middle','bottom','20%'

    right:"auto",  //组件离容器右侧的距离,'20%'

    bottom:"auto",  //组件离容器下侧的距离,'20%'

    width:"auto",  //图例宽度

    height:"auto",  //图例高度

    orient:"horizontal",  //图例排列方向

    align:"auto",  //图例标记和文本的对齐,left,right

    padding:5,  //图例内边距，单位px 5 [5, 10] [5,10,5,10]

    itemGap:10,  //图例每项之间的间隔

    itemWidth:25,  //图例标记的图形宽度

    itemHeight:14,  //图例标记的图形高度

    formatter:function (name) {  //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
        return 'Legend ' + name;
    },

    selectedMode:"single",  //图例选择的模式,true开启,false关闭,single单选,multiple多选

    inactiveColor:"#ccc",  //图例关闭时的颜色

    textStyle:mytextStyle,  //文本样式

    data:['类别1', '类别2', '类别3'],  //series中根据名称区分

    backgroundColor:"transparent",  //标题背景色

    borderColor:"#ccc",  //边框颜色

    borderWidth:0,  //边框线宽

    shadowColor:"red",  //阴影颜色

    shadowOffsetX:0,  //阴影水平方向上的偏移距离

    shadowOffsetY:0,  //阴影垂直方向上的偏移距离

    shadowBlur:10,  //阴影的模糊大小

};

2、常用属性及解析

部分参数的取值和含义
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z3PefPqR-1611279501135)(https://www.shulanxt.com/wp-content/uploads/2020/08/image-340.png#align=left&display=inline&height=654&margin=%5Bobject%20Object%5D&originHeight=654&originWidth=636&status=done&style=none&width=636)]
下面我们来解析部分legend的一些常用属性：

legend. type

图例的类型。
可选值：
- ‘plain’：普通图例。缺省就是普通图例。
- ‘scroll’：可滚动翻页的图例。当图例数量较多时可以使用。

legend.id

组件 ID。
默认不指定。指定则可用于在 option 或者 API 中引用组件。

legend. left = ‘auto’

图例组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。

legend. right = ‘auto’

图例组件离容器右侧的距离。
默认自适应。

legend. bottom = ‘auto’

图例组件离容器下侧的距离。
默认自适应。

legend. width = ‘auto’

图例组件的宽度。默认自适应。

legend. height = ‘auto’

图例组件的高度。默认自适应。

legend. orient = ‘horizontal’

图例列表的布局朝向。
可选：
- ‘horizontal’
- ‘vertical’

legend. align = ‘auto’

图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 ‘right’ 以及纵向布局（orient 为 ‘vertical’）的时候为右对齐，即为 ‘right’。
可选：
- ‘auto’
- ‘left’
- ‘right’

legend. padding

图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
使用示例：

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5，左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

legend. formatterstringFunction

用来格式化图例文本，支持字符串模板和回调函数两种形式。
使用示例：

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

legend. selectedObject

图例选中状态表。
使用示例：

selected: {
    // 选中'系列1'
    '系列1': true,
    // 不选中'系列2'
    '系列2': false
}

legend. textStyleObject

图例的公用文本样式。

legend.textStyle. color = #333

文字的颜色。

legend.textStyle. fontStyle = ‘normal’

文字字体的风格。
可选：
- ‘normal’
- ‘italic’
- ‘oblique’

legend.textStyle. fontWeight = normal

文字字体的粗细。
可选：
- ‘normal’
- ‘bold’
- ‘bolder’
- ‘lighter’
- 100 | 200 | 300 | 400…

legend.textStyle. fontSize = 12

legend.textStyle. backgroundColor = ‘transparent’

文字块背景色。
可以使用颜色值，例如：’#123234′, ‘red’, ‘rgba(0,23,11,0.3)’。
也可以直接使用图片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 这里可以是图片的 URL，
    // 或者图片的 dataURI，
    // 或者 HTMLImageElement 对象，
    // 或者 HTMLCanvasElement 对象。
}

当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应。

legend.textStyle. padding

文字块的内边距。例如：
- padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
- padding: 4：表示 padding: [4, 4, 4, 4]。
- padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
- 注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

legend.textStyle. shadowColor = ‘transparent’

文字块的背景阴影颜色。

legend.textStyle. shadowBlur

文字块的背景阴影长度。

legend.textStyle. shadowOffsetX

文字块的背景阴影 X 偏移。

legend.textStyle. shadowOffsetY

文字块的背景阴影 Y 偏移。

legend.textStyle. widthnumberstring

文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片时，可能会使用它。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。

width 也可以是百分比字符串，如 ‘100%’。表示的是所在文本块的 contentWidth（即不包含文本块的 padding）的百分之多少。之所以以 contentWidth 做基数，因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数，则百分比的计算在实用中不具有意义，可能会超出。

注意，如果不定义 rich 属性，则不能指定 width 和 height。

legend.textStyle. heightnumberstring

文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 backgroundColor）时，可能会使用它。

注意，文字块的 width 和 height 指定的是内容高宽，不包含 padding。
注意，如果不定义 rich 属性，则不能指定 width 和 height。

legend.textStyle. textBorderColor = ‘transparent’

文字本身的描边颜色。

legend. tooltipObject

图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip。

legend. icon

图例项的 icon。
ECharts 提供的标记类型包括’circle’,’rect’,’roundRect’,’triangle’,’diamond’,’pin’,’arrow’,’none’
可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。
URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

legend. dataArray

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ”（空字符串）或者 ‘\n’（换行字符串）用于图例的换行。
如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如饼图 and 漏斗图等会取自 series.data 中的 name。
如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。
示例

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

legend.data. namestring

图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。

legend.data. iconstring

图例项的 icon。
ECharts 提供的标记类型包括 ‘circle’, ‘rect’, ’roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。

legend.data. textStyleObject

图例项的文本样式。

legend. backgroundColor = ‘transparent’

图例背景色，默认透明。
颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’

legend. shadowColor

阴影颜色。支持的格式同color。

注意：此配置项生效的前提是，设置了 show: true。

legend. pageIconsObject

legend.type 为 ‘scroll’ 时有效。
图例控制块的图标。

legend. pageTextStyleObject

legend.type 为 ‘scroll’ 时有效。
图例页信息的文字样式。

legend. selectorbooleanArray

从 v4.4.0 开始支持
图例组件中的选择器按钮，目前包括全选和反选两种功能。默认不显示，用户可手动开启，也可以手动配置每个按钮的标题。
使用方式如下：

selector: [
    {
        type: 'all or inverse',
        // 可以是任意你喜欢的 title
        title: '全选'
    },
    {
        type: 'inverse',
        title: '反选'
    }
]

// 或
selector: true

// 或
selector: ['all', 'inverse']

3、legend图标图例的形状

![](https://img-blog.csdnimg.cn/img_convert/e06dfa9951bb902bf63cb8ae7750d869.png#align=left&display=inline&height=403&margin=[object Object]&originHeight=403&originWidth=890&status=done&style=none&width=890)

legend:{
  show:true,
    // borderWidth:10,  //边框线宽
    top:'60',
      inactiveColor:"red",  //图例关闭时的颜色
        // data:['类别1', '类别2'],
        data:[{
          name:'类别1',
          icon:'rect'
        },{
          name:'类别2',
          icon:'triangle'
        }],
          backgroundColor:"pink",  //标题背景色
},

4、toolbox详解

1、toolbox概述及其主要属性

toolbox：ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
toolbox中的属性，不包含五个工具。最主要的是feature这个属性，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。
部分属性及其说明如下图：
![](https://img-blog.csdnimg.cn/img_convert/085577d731c8c62f10464a6e44416a21.png#align=left&display=inline&height=374&margin=[object Object]&originHeight=374&originWidth=939&status=done&style=none&width=939)

2、toolbox内的五个自带的工具

1.saveAsImage

这个工具可以把图表保存为图片。
常用的参数：
- type->保存图片的格式，
- name->保存文件的名字，
- backgroundColor->保存图片的背景色，
- show->是否显示该工具，

2.restore

配置项还原。
主要属性
- show->是否显示该工具

3.dataView

数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，
主要属性：
- show->是否显示该工具，
- readOnly->是否不可编辑，
- optionToContent->自定义
- backgroundColor->数据视图浮层背景色。

4.dataZoom

数据区域缩放。目前只支持直角坐标系的缩放（这里的含义就是柱状体，折线图可以缩放，但是像饼状图就不能缩放）。
主要属性：
- show->是否显示该工具。

5.magicType：

动态类型切换。
主要属性：
- show->是否显示该工具，
- type->数组，启用的动态类型，包括’line’（切换为折线图）, ‘bar’（切换为柱状图）, ‘stack’（切换为堆叠模式）, ’tiled’（切换为平铺模式）。

6、新增工具

dataZoom工具:数据区域缩放工具，目前只支持直角坐标系的缩放

**xAxisIndex，yAxisIndex：指定哪些 xAxis或yAxis被控制。**如果缺省则控制所有的x轴或y轴。如果设置为 false 则不控制任何x轴（y轴）。如果设置成 3 则控制 axisIndex 为 3 的x轴（y轴）。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴（y轴）

toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              //数据视图
              show: true,
              readOnly: false, //是否只读
            },
            magicType: {
              //切换图表
              show: true,
              type: ["line", "bar", "stack", "tiled"], //图表  折线图/柱状图/堆叠图/平铺图
            },
            restore: {
              //还原原始图表
              show: true,
            },
            saveAsImage: {
              //保存图片
              show: true,
            },
            dataZoom: {
              show: true,
              xAxisIndex: 0,
              yAxisIndex: false,
            },
          },
        },

3、自定义扩展方法

除了各个内置的工具按钮外，我们还可以自定义工具按钮
在实际开发过程中，我们有时需要根据需求需要自定义图标及功能。
**注意：**自定义的工具名字，只能以 my 开头，例如myTool1，myTool2

toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              //数据视图
              show: true,
              readOnly: false, //是否只读
            },
            magicType: {
              //切换图表
              show: true,
              type: ["line", "bar", "stack", "tiled"], //图表  折线图/柱状图/堆叠图/平铺图
            },
            restore: {
              //还原原始图表
              show: true,
            },
            saveAsImage: {
              //保存图片
              show: true,
            },
            dataZoom: {
              show: true,
              xAxisIndex: 0,
              yAxisIndex: false,
            },
            myTool2: {
                show: true,
                title: '自定义扩展方法',
                icon: 'image://vip.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
          },
        },

5、dataZoom

dataZoom属性示例注释

dataZoom=[//区域缩放

    {

        id: 'dataZoomX',

        show:true,//是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在。

        backgroundColor:"rgba(47,69,84,0)",//组件的背景颜色

        type: 'slider',//slider表示有滑动块的，inside表示内置的

        dataBackground:{//数据阴影的样式。

            lineStyle:mylineStyle,//阴影的线条样式

            areaStyle:myareaStyle,//阴影的填充样式

        },

        fillerColor:"rgba(167,183,204,0.4)",//选中范围的填充颜色。

        borderColor:"#ddd",//边框颜色。

        filterMode: 'filter',
//'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。

//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。

//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。

//'none': 不过滤数据，只改变数轴范围。

        xAxisIndex:0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴

        yAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴

        radiusAxisIndex:3,//设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴

        angleAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴

        start: 30,//数据窗口范围的起始百分比,表示30%

        end: 70,//数据窗口范围的结束百分比,表示70%

        startValue:10,//数据窗口范围的起始数值

        endValue:100,//数据窗口范围的结束数值。

        orient:"horizontal",//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。

        zoomLock:false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。

        throttle:100,//设置触发视图刷新的频率。单位为毫秒（ms）。

        zoomOnMouseWheel:true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。

        moveOnMouseMove:true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。

        left:"center",//组件离容器左侧的距离,'left', 'center', 'right','20%'

        top:"top",//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

        right:"auto",//组件离容器右侧的距离,'20%'

        bottom:"auto",//组件离容器下侧的距离,'20%'

    },

    {

        id: 'dataZoomY',

        type: 'inside',

        filterMode: 'empty',

        disabled:false,//是否停止组件的功能。

        xAxisIndex:0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴

        yAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴

        radiusAxisIndex:3,//设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴

        angleAxisIndex:[0,2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴

        start: 30,//数据窗口范围的起始百分比,表示30%

        end: 70,//数据窗口范围的结束百分比,表示70%

        startValue:10,//数据窗口范围的起始数值

        endValue:100,//数据窗口范围的结束数值。

        orient:"horizontal",//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。

        zoomLock:false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。

        throttle:100,//设置触发视图刷新的频率。单位为毫秒（ms）。

        zoomOnMouseWheel:true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。

        moveOnMouseMove:true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
];

实例讲解

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
    data1.push([random(15), random(10), random(1)]);
    data2.push([random(10), random(10), random(2)]);
    data3.push([random(15), random(10), random(3)]);
}

option = {
    animation: false,
    legend: {
        data: ['scatter', 'scatter2', 'scatter3']
    },
    tooltip: {
    },
    xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    dataZoom: [
    //控制X、Y轴显示滑动条
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        //设置鼠标滚轮控制X、Y轴的缩放（可以不写）
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ],
    series: [
        {
            name: 'scatter',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data1
        },
        {
            name: 'scatter2',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data2
        },
        {
            name: 'scatter3',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8,
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data3
        }
    ]
}

6、visualMap详解

1、visualMap概述

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
视觉元素可以是：
- symbol: 图元的图形类别。
- symbolSize: 图元的大小。
- color: 图元的颜色。
- colorAlpha: 图元的颜色的透明度。
- opacity: 图元以及其附属物（如文字标签）的透明度。
- colorLightness: 颜色的明暗度。
- colorSaturation: 颜色的饱和度。
- colorHue: 颜色的色调。

visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。

2、visualMap 组件的类型

visualMap 组件可以定义为分段型（visualMapPiecewise）或连续型（visualMapContinuous），通过 type 来区分。例如：

option = {
    visualMap: [
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
    ...
};

3、视觉映射方式的配置

既然是『数据』到『视觉元素』的映射，visualMap 中可以指定数据的『哪个维度』（参见visualMap.dimension）映射到哪些『视觉元素』中。
在 visualMap 组件所控制的 series 中，如果 series 中某个数据项需要避开 visualMap 映射，可以这么配置：

series: {
    type: '...',
    data: [
        {name: 'Shanghai', value: 251},
        {name: 'Haikou', value: 21},
        // 设置 `visualMap: false` 则 visualMap 不对此项进行控制，此时系列
        // 可使用自身的视觉参数（color/symbol/ ...控制此项的显示。
        {name: 'Beijing', value: 821, visualMap: false},
        ...
    ]
}

4、visuaMap代码实例及对应注释

visualMap=[  //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。

// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。

    {

        show:true,  //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在

        type: 'continuous',  // 定义为连续型 viusalMap

        min:10,  //指定 visualMapContinuous 组件的允许的最小值

        max:100,  //指定 visualMapContinuous 组件的允许的最大值

        range:[15, 40],  //指定手柄对应数值的位置。range 应在 min max 范围内

        calculable:true,  //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）

        realtime:true,  //拖拽时，是否实时更新

        inverse:false,  //是否反转 visualMap 组件

        precision:0,  //数据展示的小数精度，默认为0，无小数点

        itemWidth:20,  //图形的宽度，即长条的宽度。

        itemHeight:140,  //图形的高度，即长条的高度。

        align:"auto",  //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

        text:['High', 'Low'],  //两端的文本

        textGap:10,  //两端文字主体之间的距离，单位为px

        dimension:2,  //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度

        seriesIndex:1,  //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列

        hoverLink:true,  //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮

        inRange:{  //定义 在选中范围中 的视觉元素

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        outOfRange:{  //定义 在选中范围外 的视觉元素。

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        zlevel:0,  //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

        z:2,  //所属组件的z分层，z值小的图形会被z值大的图形覆盖

        left:"center",  //组件离容器左侧的距离,'left', 'center', 'right','20%'

        top:"top",  //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

        right:"auto",  //组件离容器右侧的距离,'20%'

        bottom:"auto",  //组件离容器下侧的距离,'20%'

        orient:"vertical",  //图例排列方向

        padding:5,  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]

        backgroundColor:"transparent",  //标题背景色

        borderColor:"#ccc",  //边框颜色

        borderWidth:0,  //边框线宽

        textStyle:mytextStyle,  //文本样式

        formatter: function (value) {  //标签的格式化工具。

            return 'aaaa' + value;  // 范围标签显示内容。

        }

    },

    {
        show:true,  //是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在

        type: 'piecewise',  // 定义为分段型 visualMap

        splitNumber:5,  //对于连续型数据，自动平均切分成几段。默认为5段

        pieces: [  //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式

            {min: 1500},  // 不指定 max，表示 max 为无限大（Infinity）。

            {min: 900, max: 1500},

            {min: 310, max: 1000},

            {min: 200, max: 300},

            {min: 10, max: 200, label: '10 到 200（自定义label）'},

            {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。

            {max: 5}  // 不指定 min，表示 min 为无限大（-Infinity）。

        ],

        categories:['严重污染', '重度污染', '中度污染', '轻度污染', '良', '优'],  //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集

        min:10,  //指定 visualMapContinuous 组件的允许的最小值

        max:100,  //指定 visualMapContinuous 组件的允许的最大值

        minOpen:true,  //界面上会额外多出一个『< min』的选块

        maxOpen:true,  //界面上会额外多出一个『> max』的选块。

        selectedMode:"multiple",  //选择模式，可以是：'multiple'（多选）。'single'（单选）。

        inverse:false,  //是否反转 visualMap 组件

        precision:0,  //数据展示的小数精度，默认为0，无小数点

        itemWidth:20,  //图形的宽度，即长条的宽度。

        itemHeight:140,  //图形的高度，即长条的高度。

        align:"auto",  //指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

        text:['High', 'Low'],  //两端的文本

        textGap:10,  //两端文字主体之间的距离，单位为px

        showLabel:true,  //是否显示每项的文本标签

        itemGap:10,  //每两个图元之间的间隔距离，单位为px

        itemSymbol:"roundRect",  //默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

        dimension:2,  //指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度

        seriesIndex:1,  //指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列

        hoverLink:true,  //鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮

        inRange:{  //定义 在选中范围中 的视觉元素

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        outOfRange:{  //定义 在选中范围外 的视觉元素。

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        zlevel:0,  //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

        z:2,  //所属组件的z分层，z值小的图形会被z值大的图形覆盖

        left:"center",  //组件离容器左侧的距离,'left', 'center', 'right','20%'

        top:"top",  //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

        right:"auto",  //组件离容器右侧的距离,'20%'

        bottom:"auto",  //组件离容器下侧的距离,'20%'

        orient:"vertical",  //图例排列方向

        padding:5,  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]

        backgroundColor:"transparent",  //标题背景色

        borderColor:"#ccc",  //边框颜色

        borderWidth:0,  //边框线宽

        textStyle:mytextStyle,  //文本样式

        formatter: function (value) {  //标签的格式化工具。

            return 'aaaa' + value;  // 范围标签显示内容。

        }
    }
];

三、各种图表的讲解和注意事项

请自行去看文档

四、echarts的相关主题

除了默认主题外，内置了两套主题，分别为 light 和 dark

使用默认主题：var chart = echarts.init(dom);
使用主题light：var chart = echarts.init(dom, ‘light’);
使用主题dark： var chart = echarts.init(dom, ‘dark’);

五、调色盘

概述

调色盘可以在 option 中设置。
调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。
可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

系列调色盘与全局调色盘同时出现

当系列调色盘与全局调色盘同时出现时，图表使用系列调色盘中配置的颜色(就近原则)

六、echarts的loading效果

异步加载的时候避免出现白屏时间过长，可以添加loading效果

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  myChart.showLoading();  // 开启 loading 效果

        $.get('data.json', function (data) {
   myChart.hideLoading();  // 隐藏 loading 效果
   myChart.setOption({
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie
                    }
                ] ,
   title:{
    text:"demo数据分析",
    subtext:'数据纯属虚构',
    }
            })
        }, 'json');
    </script>

七、数据的动态更新

概述

ECharts 由数据驱动，而数据的改变会驱动图表展现的改变，因此动态数据的实现也变得异常简单。
所有数据的更新都通过 setOption 实现，我们只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，在ECharts3中可以先 data.push(value) 后 setOption

<script type="text/javascript">
        var base = +new Date(2014, 9, 3);
  var oneDay = 24 * 3600 * 1000;
  var date = [];
  var data = [Math.random() * 150];
  var now = new Date(base);

  function addData(shift) {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
      date.push(now);
      data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
      if (shift) {
          date.shift();
          data.shift();
      }
      now = new Date(+new Date(now) + oneDay);
  }
  for (var i = 1; i < 100; i++) {
      addData();
  }
  option = {
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
      },
      yAxis: {
          boundaryGap: [0, '50%'],
          type: 'value'
      },
      series: [
          {
              name:'成交',
              type:'line',
              smooth:true,
              symbol: 'none',
              stack: 'a',
              areaStyle: {
                  normal: {}
              },
              data: data
          }
      ]
  };
  setInterval(function () {
      addData(true);
      myChart.setOption({
          xAxis: {
              data: date
          },
          series: [{
              name:'成交',
              data: data
          }]
      });
  }, 500);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>

解析

数据更新通过setInterval（）方法实现

setInterval（）方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示： 500 毫秒= 0.5 秒。

被setInterval（）调用的方法

myChart.setOption(）方法
- myChart.setOption()方法会更新图表，
- 而数据会在ddData被调用时更新
- 数据的改变会驱动图表展现的改变
addData（）方法
- addData（）方法每被调用一次就会更新一次data
- data的更新包括data和date
  - data对应表中具体的数据
  - date对应x轴的横坐标

故我们的图表每500毫秒会更新一次数据和图表

八、数据集

1、demo简单案例

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var 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]
                ]
            },
            // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
            xAxis: {type: 'category'},
            // 声明一个 Y 轴，数值轴。
            yAxis: {},
            // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ],
   title:{
   text:"超市销量图",
   subtext:"数据纯属虚构",
   }
        };

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

2、对象数组的格式的案例

var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                    ]
                },
                xAxis: {type: 'category',axisLabel: {
                    interval: 0,
                    rotate:30
                }},
                yAxis: {},
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ],
   title:{
   text:"超市销量图",
   subtext:"数据纯属虚构",
   }
            };

A_bad_boy_hahaha

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习笔记

Echarts学习笔记一、使用Echartsa、在官方网站中挑选合适的版本进行下载完全版（echarts.js）：体积最大，包含所有的图表和组件；常用版（echarts.common.js）：体积适中，包含常见的图表和组件；精简版（echarts.simple.js）：体积较小，仅包含最常用的图表和组件；b、使用 npm install echarts -S安装echarts库。二、echarts的组件Title组件：标题组件，包含了主标题和副标题Tooltip组件：提示框组件，
复制链接

扫一扫