vue-echarts使用笔记

[kekobin]

资源地址

v-echarts文档
echarts文档
在线测试demo

基础概念

1.echarts 实例
2.系列（series）
3.组件（component）

基础概念

知识点

1.初始化一个 echarts 实例：echarts是通过 setOptions，v-echarts是通过配置options属性

2.echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）

3.echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）

4.echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

5.系列里的 series.data 是本系列的数据。而另一种描述方式，系列数据从 dataset 中取：

var option = {
    dataset: {
        source: [
            [121, 'XX', 442, 43.11],
            [663, 'ZZ', 311, 91.14],
            [913, 'ZZ', 312, 92.12],
            ...
        ]
    },
    xAxis: {},
    yAxis: {},
    series: [
        // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
        {type: 'bar', encode: {x: 1, y: 0}},
        {type: 'bar', encode: {x: 1, y: 2}},
        {type: 'scatter', encode: {x: 1, y: 3}},
        ...
    ]
};

6.组件的定位
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。

其中，他们每个值都可以是：

• 绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
• 或者基于 echarts 容器高宽的百分比（例如 right: '20%' 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。

如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。

7.坐标系
我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：

再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：

再来看下图，一个 echarts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：

8.阴影的配置
ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。例如阴影的样式可以通过下面几个配置项设置：

itemStyle: {
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

option = {
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',
            itemStyle: {
                normal: {
                    shadowBlur:4,
                    shadowColor: 'rgba(0, 0, 0, 0.9)'
                }
            }
        }
    ]
};

itemStyle的emphasis是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

9.深色背景和浅色标签

options = {
   backgroundColor: '#2c343c', // 底盘的背景色
	textStyle: { // 全局文本颜色
        color: 'rgba(255, 255, 255, 0.3)'
    },
    series: [
    	{
    		label: { // 或者每个系列单独设置样式
			    textStyle: {
			        color: 'rgba(255, 255, 255, 0.3)'
			    }
			},
			// 跟itemStyle一样，label和labelLine的样式也有emphasis状态。
			itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                emphasis: {
                    shadowBlur: 200,
                    shadowColor: 'red'
                }
            },
    	}
    ],
    labelLine: { // 饼图的话还要将标签的视觉引导线的颜色设为浅色
	    lineStyle: {
	        color: 'rgba(255, 255, 255, 0.3)'
	    }
	}
}

10.echarts是通过options属性进行不同组件的初始化的，如：

option = {
    legend: {},
    tooltip: {},
}

这里两个组件都为空，但是这两个组件已经算是初始化了，即会按照默认的配置显示出来。

11.dataset 入门

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'} // 对应第四列
    ]
}

或者也可以使用常见的对象数组的格式：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，
        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
        // 如果不指定 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'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

添加各种属性

 {
    title: {
      text: 'xx'
    },
    tooltip: {},
    xAxis: [
        {type: 'value', gridIndex: 0, name:'xx'},
        {type: 'category', gridIndex: 1, name:'xx'}
    ],
    yAxis: [
        {gridIndex: 0, name:'xx'},
        {gridIndex: 1, name:'xx'}
    ],
    grid: [
        {right: '50%'},
        {left: '50%'}
    ],
    series: [
        {
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data:[
                [10,20],
                [30,30],
                [40,50],    
            ]
        },
        {
            type: 'scatter',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:[
                [10,20],
                [30,30],
                [40,50],    
            ]
        }
    ]
  }