小刘怕很忙 2022-05-04 12:56 采纳率: 75%
浏览 56
已结题

echarts数据可视化

img


这个如何用echarts制作出来？散点图与折线图组合，想请教一下！

  • 写回答

1条回答 默认 最新

  • blackoon88 2022-05-04 14:03
    关注
    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Scatter on Single Axis - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</body>
</html>

    
* {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}


    
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

// prettier-ignore
const hours = [
    '≤17岁', '18-29岁', '30-59岁', '≥60'
];
// prettier-ignore
const days = [
    ''
];
// prettier-ignore
const data = [[0, 10], [1, 45], [2, 30], [3, 15]];
const title = [];
const singleAxis = [];
const series = [];
days.forEach(function (day, idx) {
  title.push({
    textBaseline: 'middle',
    top: ((idx + 0.5) * 100) / 2 + '%',
    text: day
  });
  singleAxis.push({
    left: 150,
    type: 'category',
    boundaryGap: true,
    data: hours,
    top: (idx * 100) + 5 + '%',
    height: 100  - 20 + '%',
    axisLabel: {
      interval: 0
    }
  });
  series.push({
    singleAxisIndex: idx,
    coordinateSystem: 'singleAxis',
    type: 'scatter',
    data: [],
    itemStyle:{
      normal:{
        color:'#e0d52d'
      }
    },
    label: {
      normal: {
        show: true,
        position: 'insideLeft',
      }
    },
    symbolSize: function (dataItem) {
      return dataItem[1]*4;
    }
  });
});
data.forEach(function (dataItem) {
  series[0].data.push([dataItem[0], dataItem[1]]);
});
option = {
  tooltip: {
    position: 'top',
    show: true,
    alwaysShowContent: true,
    formatter: function (params) {
        return params['data'][1] +   '.00%'
    }
  },
  title: title,
  singleAxis: singleAxis,
  series: series
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

//显示提示框
this.myChart.dispatchAction({
  type: 'showTip',
  seriesIndex:0,  
  dataIndex:0
})

    img

    若有帮助，请及时采纳，谢谢~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 5月29日
  • 已采纳回答 5月21日
  • 创建了问题 5月4日

悬赏问题

  • ¥15 如何用python向钉钉机器人发送可以放大的图片？
  • ¥15 vue3加ant-design-vue无法渲染出页面
  • ¥15 matlab（相关搜索：紧聚焦）
  • ¥15 基于51单片机的厨房煤气泄露检测报警系统设计
  • ¥15 路易威登官网 里边的参数逆向
  • ¥15 Arduino无法同时连接多个hx711模块，如何解决？
  • ¥50 需求一个up主付费课程
  • ¥20 模型在y分布之外的数据上预测能力不好如何解决
  • ¥15 processing提取音乐节奏
  • ¥15 gg加速器加速游戏时，提示不是x86架构