笔记 echart高级应用

多坐标轴

这里的多指的的值多个x轴或者y轴，需要多坐标的原因一般就是需要不同的刻度，
将yAxis设为数组，每个元素的设置和单坐标轴一样，然后在series里指定yAxisIndex以对应相应的y轴

  yAxis:[
            {max:50},
            {},
        ],
        series:[
            {
          
                yAxisIndex:0
            },
            {
                yAxisIndex:1
            }
        ]
        

数据集

ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射.

dataset.source

source对应原始数据，一般为二维数组，如此一来，,每个元素的第一个元素，也就是表格的第一列就会对应维度名，也就是类目轴的名， 第一行的数据就分别对应series的name,所以默认情况下，第一行第一列的数据是没啥用，除了占位。

这里有个疑问，第一行数据如果被抹掉了，也就是少个图例 如果有写legend；按理说第一行被删掉了，那第二行不就成了第一行。似乎是期望第一行应该是字符串，如果是数值会被按数据处理，但凡第一行除了第一个元素，只要有一个数值，就会被认为是一个系列的数据

 dataset: {[
    ['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'}
    ]

dataset.dimensions

也可以自定义维度那就是 dimensions，定义之后它就会取代默认第一行的数据映射

维度（dimension）

这里是官网“维度（dimension）”的概念介绍。

常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。

维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，‘2015’, ‘2016’, ‘2017’’ 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。

维度的定义，也可以使用单独的 dataset.dimensions 或者 series.dimensions 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：

可以通过serieslayoutBy定义行列映射   series:[{type:'bar, seriesLayoutBy:'row}'], 
默认值 column 一列就是一个系列，row 一行对应一个系列，在series中设置就会去找对应的行列数据
dataset.source 第一行/列是否是 维度名 ;如果为true（默认是null/undefine,自动探测），
serieslayout 为row 则第一列为维度名信息， 
为column则取第一行

series[0].encode

encode 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称,在直角坐标系中
用x,y 指定具体的数据， 如果说series确定了是第几行，那么这里就是确定第几列，既可以用索引也可以用dimension声明的series name，从而定位到需要映射的数据
y: 1表示第二行的数据，y:[1,2]表示第二列加上第三列的数据

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用第一个维度和第三个维度的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}

dataset是集中存放数据的，如果写了dataset.source又写series.data最终生效的是data

视觉映射

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
visualMap 中可以指定数据的『哪个维度』（visualMap.dimension）映射到哪些『视觉元素』（visualMap.inRange 和 visualMap.outOfRange）中。
视觉元素可以是
symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
也就是将数据和视觉关联起来，比如数值越大，红色越深；
type: 分为连续型continuous 和分段型piecewise;
通过min max 定义图元的视觉范围， inrange outofrange设置图元的属性
dimension 决定 视觉效果的数据，也就是说视觉效果不一定是和当前系列的数据相关

    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        //要使用的维度
        dimension: 0,
        inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
        }
    },

事件

图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，也可以主动触发相应事件；
通过echart.on(type, cb)来监听事件 echart 是图表实例， 事件有两种。
一种是鼠标事件，
‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’，
另一种是交互事件，如highlight ,selectchanged;在event 属性中可查看；

主动触发action, myChart.dispatchAction({ type: ‘’ }),;

富文本

rich属性一般在各种title 中使用,就是和文字样式相关的
title.textStyle.rich :{}
下面的img name 都是样式名 可理解为css的class
在formatter中使用定义好的富文本样式{stylename|}

img:{
                    width:60,
                    height:60,
                    backgroundColor:{
                        image:item.img
                    },
                    borderColor:'#fff',
                    borderWidth:5
                },
                name:{
                    fontSize:20,
                    lineHeight:32,
                    fontWeight:'bold'
                }

--------------------------------------------------------------------------------
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),