echarts并列柱状图绘制、且动态渲染数据

1、效果图

2、代码

2.1、布局

2.2、mounted挂载方法

2.3、methons使用

2.3.1、获取接口数据【接口数据为数组包裹对象，将需要渲染的字段，取出来】

2.3.2、echarts绘制代码

const chart = this.$refs.chart;

const myChart = this.$echarts.init(chart);

if (chart) {

// option && myChart.setOption(option);

const option = {

legend: {

data: ["总量", "结构化数据", "非结构化数据"],

textStyle: {

//图例字体大小

fontSize: 16,

color: "#fff",

},

//图例大小

itemHeight: 16,

//图例位置

right: 150,

// bottom:350

},

tooltip: {},

xAxis: [{ data: name }, { axisLabel: { interval: 0 } }],

yAxis: {},

textStyle: {

fontSize: 20,

color: "#fff",

fontWeight: "lighter",

},

series: [

{

type: "bar",

data: grossData,

barWidth: 25,

name: "总量",

barGap: 0,

label: {

// 柱状图上方文本标签，默认展示数值信息

show: true,

position: "top",

color: "#fff",

fontWeight: "bolder",

fontSize: 12,

},

},

{

type: "bar",

data: structure,

name: "结构化数据",

barWidth: 25,

barGap: 0,

label: {

// 柱状图上方文本标签，默认展示数值信息

show: true,

position: "top",

color: "#fff",

fontWeight: "bolder",

fontSize: 12,

},

},

{

type: "bar",

data: notStructure,

name: "非结构化数据",

barWidth: 25,

barGap: 0,

label: {

// 柱状图上方文本标签，默认展示数值信息

show: true,

position: "top",

color: "#fff",

fontWeight: "bolder",

fontSize: 12,

},

},

],

};

option && myChart.setOption(option);

}