前言
从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。
https://echarts.apache.org/handbook/zh/concepts/dataset
数据集最大的特点就是数据和数据展示配置的分离。
以前我们都是在系列（series）中设置数据。
如下
代码语言：javascript复制option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
};使用数据集后，序列中只需要设置x,y展示的列即可。
代码语言：javascript复制{
"legend": {},
"tooltip": {},
"dataset": {
"dimensions": [
"product",
"2015",
"2016",
"2017"
],
"source": [
{
"2015": 43.3,
"2016": 85.8,
"2017": 93.7,
"product": "Matcha Latte"
},
{
"2015": 83.1,
"2016": 73.4,
"2017": 55.1,
"product": "Milk Tea"
},
{
"2015": 86.4,
"2016": 65.2,
"2017": 82.5,
"product": "Cheese Cocoa"
},
{
"2015": 72.4,
"2016": 53.9,
"2017": 39.1,
"product": "Walnut Brownie"
}
]
},
"xAxis": {
"type": "category"
},
"yAxis": {},
"series": [
{
"type": "bar",
"name": "2015",
"encode": {
"tooltip": [
"product"
],
"x": "product",
"y": "2015"
}
},
{
"type": "bar",
"name": "2016",
"encode": {
"tooltip": [
"product"
],
"x": "product",
"y": "2016"
}
},
{
"type": "bar",
"name": "2017",
"encode": {
"tooltip": [
"product"
],
"x": "product",
"y": "2017"
}
}
]
}基本
代码语言：javascript复制<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
import resize from "@/assets/utils/chat_resize.js";
export default {
name: "BarChart",
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "600px",
},
height: {
type: String,
default: "400px",
},
title: {
type: String,
default: "",
},
colorField: {
type: String,
default() {
return "name";
},
},
keyFields: {
type: Array,
default() {
return ["name", "subject"];
},
},
valueFields: {
type: Array,
default() {
return ["score", "socreHistory"];
},
},
dataList: {
type: Array,
default() {
return [
{
id: 1001,
name: "王宁",
subject: "语文",
score: 80,
sex: "女",
socreHistory: 100,
},
{
id: 1002,
name: "王宁",
subject: "数学",
score: 60,
sex: "女",
socreHistory: 80,
},
{
id: 1003,
name: "王宁",
subject: "英语",
score: 93,
sex: "女",
socreHistory: 60,
},
{
id: 1004,
name: "张瑞红",
subject: "语文",
score: 99,
sex: "女",
socreHistory: 30,
},
{
id: 1005,
name: "张瑞红",
subject: "数学",
score: 70,
sex: "女",
socreHistory: 80,
},
{
id: 1006,
name: "张瑞红",
subject: "英语",
score: 80.5,
sex: "女",
socreHistory: 60,
},
{
id: 1007,
name: "王中露",
subject: "语文",
score: 60,
sex: "男",
socreHistory: 70,
},
{
id: 1008,
name: "王中露",
subject: "数学",
score: 90,
sex: "男",
socreHistory: 100,
},
{
id: 1009,
name: "王中露",
subject: "英语",
score: 70,
sex: "男",
socreHistory: 90,
},
{
id: 1010,
name: "郭忠博",
subject: "语文",
score: 80,
sex: "男",
socreHistory: 60,
},
{
id: 1011,
name: "郭忠博",
subject: "数学",
score: 70,
sex: "男",
socreHistory: 50,
},
{
id: 1012,
name: "郭忠博",
subject: "英语",
score: 99,
sex: "男",
socreHistory: 70,
},
{
id: 1013,
name: "雍文秀",
subject: "语文",
score: 30,
sex: "女",
socreHistory: 80,
},
{
id: 1014,
name: "雍文秀",
subject: "数学",
score: 100,
sex: "女",
socreHistory: 98,
},
{
id: 1015,
name: "雍文秀",
subject: "英语",
score: 98,
sex: "女",
socreHistory: 65,
},
];
},
},
},
data() {
return {
chart: null,
};
},
watch: {
dataList: function () {
this.initChart();
},
},
async mounted() {
await this.$nextTick();
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
if (!this.chart) {
this.chart = echarts.init(this.$el);
}
let dataList = this.dataList;
let option = {
legend: {
show: true,
top: 2,
right: 2,
},
tooltip: {
show: true,
},
color: [
"#20afff",
"#2cd9ff",
"#9dfff0",
"#77fef6",
"#fffc91",
"#fdc67f",
"#f2528b",
],
dataset: {
dimensions: dataList.length ? Object.keys(dataList[0]) : [],
source: dataList,
},
xAxis: { type: "category" },
yAxis: {},
series: [
{
type: "bar",
stack: "分数",
name: "分数",
showBackground: true,
backgroundStyle: {
color: "#f3f3f3",
},
seriesLayoutBy: "column",
encode: {
tooltip: ["name", "subject", "score"],
x: ["name"],
y: "score",
itemGroupID: "subject",
itemName: "subject",
},
},
{
type: "bar",
name: "历史分数",
showBackground: true,
backgroundStyle: {
color: "#f3f3f3",
},
stack: "历史分数",
encode: {
tooltip: ["name", "subject", "score"],
x: "name",
y: "socreHistory",
},
},
],
};
this.chart.setOption(option);
},
},
};
</script>数据分组
如果我们想把数据按科目进行分组
