1. ECharts的系列及多系列 (Series)
-
系列
series可以是对象也可以是数组，保存的是需要渲染的图形的类型对象； -
系列（series）是指：一组数值映射成对应的图，系列是和图进行映射的。
1.1 ECharts多系列案例
HTML
<template>
<div id="eCharts-series"> </div>
</template>
JavaScript
import * as echarts from 'echarts'
export default {
name: "index",
methods: {
init() {
// 获取渲染的DOM
const chartDom = document.querySelector('#eCharts-series')
console.log(chartDom)
// 初始化Charts 设置主题并设置渲染方式为 'svg'
const chart = echarts.init(chartDom, 'dark', {renderer: 'svg'})
// 设置option
chart.setOption(
{
title: {
text: 'ECharts多系列图表'
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度']
},
yAxis: {},
// 系列->多系列
series: [
{
type: 'bar',
data:[100,203,45,65,32]
},
{
type:'pie',
// 分类数据是对象数组
data:[
{name:'分类A', value: 200},
{name:'分类B', value: 100},
{name:'分类C', value: 80},
{name:'分类D', value: 160}
],
// 居中 距左侧 60% 距右侧 80px
center:['60%',80],
// 设置饼图的半径
radius:30
},
{
type:'line',
data:[120,163,98,203,65]
}
]
}
)
}
},
mounted() {
this.init()
}
}
-
CSS:渲染的图表需要设置宽度和高度之后才能被渲染出来
#eCharts-series {
margin: 50px auto;
width: 100%;
height: 888px;
}
2. ECharts的新特性dataset
-
dataset可以对需要渲染的数据进行集中管理；
使用dataset对图标渲染的数据进行集中管理
3. ECharts的组件
-
subtext：标题组件； -
legend：图例； -
toolbox: 工具栏； -
dataZoom: 预览组件；
4. ECharts的定位
-
grid：定位组件；
// 定位组件
grid: {
left: '20%',
right: '20%',
top: '20%',
bottom: '20%'
}
5. ECharts的坐标轴
ECharts坐标轴
5.1 单坐标绘制散点图
const chartDom = document.querySelector('#charts-axis')
this.chart = echarts.init(chartDom, 'dark', {renderer: 'svg'})
this.chart.setOption(
{
title: {
text: 'ECharts坐标轴',
subtext: '我是副标题'
},
xAxis: {
type: 'category'
},
yAxis: {},
dataset: {
source: [
[112, 130],
[134, 243],
[34, 45],
[124, 116],
[137, 125],
[117, 110]
]
},
series: {
type: 'scatter',
encode: {x: 0, y: 1}
}
}
)
5.2 双坐标轴
// 双坐标系
const towChartDom = document.querySelector('#charts-two-axis')
this.twoChart = echarts.init(towChartDom, 'essos')
this.twoChart.setOption(
{
title: {
text: 'ECharts双坐标系'
},
xAxis: {
// 当多坐标系的时候需要明确的指定坐标系的分类
type: 'category'
},
yAxis: [
{
// 可以自定义y轴的最大值和最小值
min: 0,
max: 100
},
{
// 或者去除另外一个y轴的分界线
/* min: 0,
max: 100,*/
splitLine: {
show: false
}
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1]
]
},
series: [
{
// 按照列的方式进行获取dataset中的数据
type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0
},
{
type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1
},
]
}
)
5.3 多坐标轴
// 多坐标系
const manyChartDom = document.querySelector('#charts-many-axis')
this.manyChart = echarts.init(manyChartDom, 'dark')
this.manyChart.setOption(
{
title: {
text: 'EChart一个Canvas多个坐标系'
},
// xy轴需要共用的一个grid
xAxis: [
{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [
{
gridIndex: 0
},
{
gridIndex: 1
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
grid: [
{
bottom: '50%'
},
{
top: '50%'
}
],
series: [
// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
]
}
)
网友评论