永洪社区

标题: echarts画的图表，导出是空白的 [打印本页]

作者: Silvia 时间: 2023-5-10 10:24
标题: echarts画的图表，导出是空白的
谷歌是最新版，权限也是完全控制

作者: yhdata_ruby 时间: 2023-5-10 10:28
使用的什么版本呀，导出样式是什么呢，方便代码发出来这边测试一下吗

作者: Silvia 时间: 2023-5-10 10:37

yhdata_ruby 发表于 2023-5-10 10:28
使用的什么版本呀，导出样式是什么呢，方便代码发出来这边测试一下吗

// 为保证正常绘图，代码格式与所选格式需保持一致;
// 请输入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);

作者: Silvia 时间: 2023-5-10 10:37

yhdata_ruby 发表于 2023-5-10 10:28
使用的什么版本呀，导出样式是什么呢，方便代码发出来这边测试一下吗

作者: yhdata_ruby 时间: 2023-5-10 10:49

Silvia 发表于 2023-5-10 10:37
10

换个浏览器看看能否导出，是导出png还是excel 还是什么，通过产品导航栏进行导出的吗

作者: Silvia 时间: 2023-5-10 11:27

yhdata_ruby 发表于 2023-5-10 10:49
换个浏览器看看能否导出，是导出png还是excel 还是什么，通过产品导航栏进行导出的吗 ...

发邮件，图片

作者: Silvia 时间: 2023-5-10 11:27

yhdata_ruby 发表于 2023-5-10 10:49
换个浏览器看看能否导出，是导出png还是excel 还是什么，通过产品导航栏进行导出的吗 ...

我用调度任务发邮件图片都不可以

作者: yhdata_ruby 时间: 2023-5-10 13:16

Silvia 发表于 2023-5-10 11:27
我用调度任务发邮件图片都不可以

看一下私信呢

欢迎光临永洪社区 (https://club.yonghongtech.com/)