永洪社区

标题: 自定义JS代码做这种图为啥写不出来？哪里错了呀 [打印本页]

作者: whr_1997 时间: 2024-4-12 00:03
标题: 自定义JS代码做这种图为啥写不出来？哪里错了呀
const source = options.data.map(o => {
return Object.values(o);
});
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [ [ "市场分布","预算_利润","预算_销售" ,...source
}
};
const labelRight = {
  position: 'right'
};
/////////////////////
option = {
backgroundColor: '#012248',
dataZoom: {
      type: 'inside',
      start: 0,
      end: 100,
      yAxisIndex: [0
},
tooltip: {
      trigger: 'axis',
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
},
legend: {
      show: true,
      icon: 'rect',
      itemWidth: 30,
      itemHeight: 10,
      itemGap: 9,
      top: '10',
      left: 'center',
      textStyle: {
         fontSize: 20,
         color: '#F1F1F3'
      },
      data: options.colmn1,
},
grid: [{
      show: false,
      left: '5%',
      top: 60,
      bottom: 60,
      containLabel: true,
      width: '42%'
}, {
      show: false,
      left: '50.5%', //调整中间文字位置
      top: 80, //使中间文字对齐
      bottom: 60,
      width: '0%',
}, {
      show: false,
      right: '5%',
      top: 60,
      bottom: 60,
      containLabel: true,
      width: '42%'
,
xAxis: [{
      type: 'value',
      inverse: true,
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      position: 'top',
      axisLabel: {
         show: true,
         color: '#fff'
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: lineColor
         }
      },
}, {
      gridIndex: 1,
      show: false
}, {
      gridIndex: 2,
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      position: 'top',
      axisLabel: {
         show: true,
         color: '#fff'
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: lineColor
         }
      },
,
yAxis: [{
      type: 'category',
      inverse: true,
      position: 'right',
      axisLine: {
         show: false,
         lineStyle: {
            color: lineColor
         }
      },

      axisTick: {
         show: false
      },
      axisLabel: {
         show: false
      },
      data: options.column2
}, {
      gridIndex: 1,
      type: 'category',
      inverse: true,
      position: 'left',
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: '#ffffff',
            fontSize: 16,
         },
      },
      data: label.map((value) => {
         return {
            value: value,
            textStyle: {
                  align: 'center',
            }
         }
      })
}, {
      gridIndex: 2,
      type: 'category',
      inverse: true,
      position: 'left',
      axisLine: {
         show: false,
         lineStyle: {
            color: lineColor
         }
      },
      axisTick: {
         show: false
      },
      axisLabel: {
         show: false

      },
      data:options.column3
,
series: [{
         name: '左',
         type: 'bar',
         barWidth: '15',
         stack: 'left',
         label: {
            show: true,
            fontSize: 14,
            distance: 10,
            color: '#fff',
            position: 'left', //inside|right
            formatter: (params) => {
                  return params.value + '%'
            }
         },
         itemStyle: {
            normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: colors[0.start
                     },
                     {
                        offset: 1,
                        color: colors[0.end
                     }
                  ),
                  // color:colors[0].borderColor
            }
         },
         data: data
      },
      {
         name: '右',
         type: 'bar',
         barWidth: '15',
         stack: 'right',
         xAxisIndex: 2,
         yAxisIndex: 2,
         label: {
            show: true,
            fontSize: 14,
            distance: 10,
            color: '#fff',
            position: 'right', //inside|right
            formatter: (params) => {
                  return params.value + '%'
            }
         },
         itemStyle: {
            normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: colors[1.start
                     },
                     {
                        offset: 1,
                        color: colors[1.end
                     }
                  ),
                  // color:colors[1].borderColor
            }
         }

      }

}

作者: whr_1997 时间: 2024-4-12 00:03
怎么把字段替换啊

作者: yhdata_lyaa 时间: 2024-4-12 09:32
从数据列表中拖拽绑定数据https://www.yonghongtech.com/rea ... 9%E7%BB%98%E5%9B%BE

作者: whr_1997 时间: 2024-4-12 11:40

yhdata_lyaa 发表于 2024-4-12 09:32
从数据列表中拖拽绑定数据https://www.yonghongtech.com/real-help/Z-Suite/9.4/ch/component_js.html?zoom ...

拖了没用呀，怎么在这个脚本里固定写死的数据换成对应的字段啊

作者: yhdata_lyaa 时间: 2024-4-12 14:58
参考看看呢https://club.yonghongtech.com/thread-15843-1-1.html

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