Echarts图表在Tooltip中嵌入其他图表

最新推荐文章于 2024-06-04 15:56:49 发布

怪味毛豆

最新推荐文章于 2024-06-04 15:56:49 发布

阅读量2.4k

点赞数 4

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

本文链接：https://blog.csdn.net/weixin_50645589/article/details/120221436

版权

最近在用Echarts做可视化项目，遇到这样一个需求：在地图上轮播各个省市的数据，并且用柱状图展示。

研究了Echarts的Tooltip,发现它能接受Html片段，就尝试做了一个例子，一起看下吧！先看下最后实现的效果。

在这里插入图片描述
Html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
		*{
   margin:0; padding:0;} 
	</style>
</head>
<body style="width: 100%;height:844px;background: #333;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;"></div>
</body>
<!-- 引入 echarts.js -->
<script src="../dist/echarts.js"></script>
<script src="../map/china.js"></script>

</html>

JS代码

  // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/**
* 用于初始化tooltipChart
*/
function tooltipCharts() {
   
    var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
    var option = {
   
        tooltip: {
   },
            title: {
   
                    text: '执法人/执法人',
                   left: 'center',
                    textStyle:{
   
                         fontSize:12,
                    }
                },
        dataset: {
   
            source: [
                ['xAxis', '201906', '201907', '201908', '201909', '201910', '201911', '201912', '202001', '202002', '202003'],
                ['amount', (Math.random()*(0-1) + 1).toFixed(2), (Math.random()*(0-1) + 1).toFixed(2), (Math.random()*(0-1) + 1).toFixed(2), (Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2), (Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2),(Math.random()*(0-1) + 1).toFixed(2)]
            ]
        },
        xAxis: {
   
            type: 'category',
            interval: true,
            axisLabel: {
   
                rotate: 45
            },
            axisTick: {
   
                show: false
            }
        },
        yAxis: {
   },
        color: ['#4FA8F9', '#F5A623'],
        grid: {
   
            show: true,
            backgroundColor: '#FAFAFA',
            left: 30,
            right: 20,
            top: 20
        },
        series: [{
   
            type:

最低0.47元/天解锁文章

怪味毛豆

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Echarts图表在Tooltip中嵌入其他图表

最近在用Echarts做可视化项目，遇到这样一个需求：在地图上轮播各个省市的数据，并且用柱状图展示。研究了Echarts的Tooltip,发现它能接受Html片段，就尝试做了一个例子，一起看下吧！先看下最后实现的效果。Html代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <style&
复制链接

扫一扫