// 为保证正常绘图，代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container
import * as echarts from 'echarts';
var dataEventDate = Array.from(new Set(options.column1))
var datatest = options.data
var dataFType = ['QP','TX','CN','EU','US','HK' // legend 数据
var dataFTotal = []
var i = 0
var j = 0
var dataQP = [] // QP数据值
var dataTX = [] // TX数据值
var dataCN = [] // CN数据值
var dataEU = [] // EU数据值
var dataUS = [] // US数据值
var dataHK = [] // HK数据值
for(i;i<datatest.length;i++){
// 计算总值
var total = (parseFloat(datatest[i]['column2')+parseFloat(datatest[i]['column3')+parseFloat(datatest[i]['column4')+parseFloat(datatest[i]['column5')+parseFloat(datatest[i]['column6')+parseFloat(datatest[i]['column7'));
dataFTotal.push(Math.round(total/10000));
dataQP.push(parseFloat(datatest[i]['column2').toFixed(0));
dataTX.push(parseFloat(datatest[i]['column3').toFixed(0));
dataCN.push(parseFloat(datatest[i]['column4').toFixed(0));
dataEU.push(parseFloat(datatest[i]['column5').toFixed(0));
dataUS.push(parseFloat(datatest[i]['column6').toFixed(0));
dataHK.push(parseFloat(datatest[i]['column7').toFixed(0));
}
debugger
var option = {
title:{
show:true,//false
text:"The Stock Cost Of FG Per Month",
left:'center'
},
color: ['#EFA90D', '#006BB0', '#059341','#DC2F1F', // 柱子的颜色，几个柱子就可以设置几个颜色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
orient: 'vertical',
left: 'right',
top: 'center',
align: 'left',
data: dataFType
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {
color: '#999999',
},
axisLine: {show: false},
axisTick: {show: false},
boundaryGap: ['20%', '20%',
data: dataEventDate
}
,
yAxis: [
{
type: 'value',
name: 'Cost',
nameTextStyle: {
color: '#999999',
},
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
margin: 2,
interval: 15,
color: '#999999',
}
}, {
type: 'value',
name: '',
}
,
series: [
{
name: 'QP',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataQP
},
{
name: 'TX',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataTX
},
{
name: 'CN',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataCN
},
{
name: 'EU',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataEU
},
{
name: 'US',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataUS
},
{
name: 'HK',
type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
stack: 'Ad', // 设置这个就会成为堆叠柱状图
data: dataHK
},
{
name: 'Total',
type: 'line', // 这个就是折线图的类型，设置成这个就是折线图了。
smooth: true,
color:['#1D1815', //折线条的颜色
yAxisIndex: 1,
itemStyle: {
shadowBlur: 2,
},
label:{
show: true
},
data: dataFTotal
}
}
myChart.setOption(option);
|
显示全部楼层
发表于 2023-5-10 10:37:14
显示全部楼层
发表于 2023-5-10 10:49:29
