echarts一张页面放多个图表，导出为图片

最新推荐文章于 2024-06-03 14:58:58 发布

置顶夜幕已降临

最新推荐文章于 2024-06-03 14:58:58 发布

阅读量2.8k

点赞数

分类专栏： echarts 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42068855/article/details/103893858

版权

echarts 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

echarts一张页面放多个图表，导出为图片

个人喜欢贴代码，方便我以后查看。html中hwdas.js是公司内部的js文件资源。common.js为公共资源，如有需要，可以下方留言。

效果图：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人考核成绩查询</title>
</head>
<body>
<div style="width:1400px;margin:0 auto;">
    <div id="cjcx" style="width: 1400px;height:600px;"></div>
</div>
<script src="../lib/jquery-1.12.4.min.js"></script>
<script src="../lib/echarts.min.js"></script>
<script src="../lib/hwDas.js"></script>
<script src="../lib/common.js"></script>
<script src="../js/cjcx.js"></script>
</body>
</html>

js代码

var khid = getQueryString('khid');
var bkhuser = getQueryString('bkhuser');
var khcode = getQueryString('khcode');

/**
 * 获取页面传递过来的参数
 * @param {string} name 参数名
 */
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  var context = "";
  if (r != null)
    context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}

$(function () {

  initDas();
  initAjaxChartData();

})

function initAjaxChartData() {
  var url = 'gbkh/jhgbkhxt/khgl/grszkhcjcx';
  var headers = {};
  // 此为页面传递进来的参数
  // var params = {
  //   khid:khid ,
  //   bkhuser: bkhuser,
  //   khcode: khcode
  // };
  // 测试传递参数
  var params = {
    khid: 'LuwdIk76NTujffdYV58mMpuH03kbNiHZJtV7',
    bkhuser: 'BOEM6r3N2VcBMtZpEt4lGmhpoNJpHoG9OHhL',
    khcode: 'eaed063b-3f8f-4d22-83de-174475a8997a'
  };
  hwDas.get(url, headers, params, function (result) {
    if (result.isSucceed) {
      initChart(result.data[0].datas);
    } else {
      console.log(result.errMsg);
    }
  }, function (msg) {
    console.log(msg);
  })
}

function initChart(data) {
  var cjcxChart = echarts.init(document.getElementById('cjcx'));

  var option = {
    backgroundColor: '#fff',
    title: {
      show: true,
      text: data[0].dwscgs+data[0].name+'2019年中层领导人员绩效考核个人素质得分',
      left: 'center'
    },
    color: ['rgb(110,210,255)', '#4BFFFC'],
    tooltip: {},
    legend: {
      show:false,
      orient: 'vertical',
      icon: 'circle', //图例形状
      data: ['个人素质'],
      bottom: 'center',
      right: 40,
      itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
      itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
      itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
      textStyle: {
        fontSize: 14,
        color: 'black',
      },
    },
    grid:{
      left:'50%',
    },
    toolbox: { // 导出为图片
      show: true,
      right:'10%',
      feature: {
        saveAsImage: {
          type:'png', // 格式
          name:data[0].dwscgs+data[0].name+'2019年中层领导人员绩效考核个人素质得分',// 导出图片的名字
        },
        dataView: {
          show:false
        },
        magicType: {
          show:false
        },
        restore: {
          show:false
        },
        dataZoom:{
          show:false
        },
      }
    },
    radar: {
      // shape: 'circle',
      center: ['25%', '50%'],// 雷达图显示的位置
      name: {
        textStyle: {
          color: 'black',
          fontSize: 16
        },
      },
      indicator: [],
      splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: { // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        }
      },
      axisLine: { //指向外圈文本的分隔线样式
        show: true,
        lineStyle: {
          color: 'rgb(215,215,215)'
        }
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        show: true,
        margin: 5,
        color:'black'
      },
      splitLine: {
        lineStyle: {
          color: 'rgb(223,223,223)', // 分隔线颜色
          width: 2, // 分隔线线宽
        }
      },
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show:true,
        interval:0
      },
      axisLabel:{
        show:true,
        interval: 0// 强制显示返回数据的所有x轴标签
      },
      data: []
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      data: [],
      type: 'bar',
      color:'rgb(110,210,255)',
      barWidth:'30px',
      label: {
        show:true,
        color:'black',
        position:'top'
      }
    },{
      type: 'radar',
      itemStyle:{
        color:'rgb(111,210,255)'
      },
      symbol:"circle",
      symbolSize: 8,
      label: {
        show: true,
        color:'black'
      },
      // symbol: 'angle',
      data: [{
        value: [],
        name: '个人素质',
        itemStyle: {
          normal: {
            lineStyle: {
              color: 'red',
              // shadowColor: '#4A99FF',
              // shadowBlur: 10,
            },
            shadowColor: 'rgb(110,210,255)',
            shadowBlur: 10,
          },
        },
        areaStyle: {
          normal: { // 单项区域填充样式
            color: {
              type: 'linear',
              x: 0, //右
              y: 0, //下
              x2: 1, //左
              y2: 1, //上
              colorStops: [{
                offset: 0,
                color: 'rgba(177,231,255,.5)'
              }, {
                offset: 0.5,
                color: 'rgba(177,231,255,.5)'
              }, {
                offset: 1,
                color: 'rgba(177,231,255,.5)'
              }],
              globalCoord: false
            },
            opacity: 1 // 区域透明度
          }
        }
      }]
    }]
  };

  var nameData = [];
  var valueData = [];
  var xData = [];

  for (var i = 0; i < data.length; i++) {
    if (i == 0) {
      var obj = {
        text: data[i].zbname,
        min:0,
        axisLabel: {show: true}
      }
    } else {
      var obj = {
        text: data[i].zbname,
        min:0,
        axisLabel: {show: false}
      }
    }
    nameData.push(obj);
    valueData.push(data[i].khscore);
    xData.push(data[i].zbname);
  }


  option.radar.indicator = nameData;
  option.series[1].data[0].value = valueData;
  option.xAxis.data = xData;
  option.series[0].data = valueData;

  // 使用刚指定的配置项和数据显示图表。
  cjcxChart.setOption(option);
}

夜幕已降临

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
echarts一张页面放多个图表，导出为图片

echarts一张页面放多个图表，导出为图片个人喜欢贴代码，方便我以后查看。html中hwdas.js是公司内部的js文件资源。common.js为公共资源，如有需要，可以下方留言。效果图：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录