echarts的使用

最新推荐文章于 2024-09-09 21:14:24 发布

知意..

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量254

点赞数 2

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

本文链接：https://blog.csdn.net/qq_74748121/article/details/139534810

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一 echarts的使用

引入 echarts.js 文件

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

准备一个呈现图表的盒子

 <div class="container">
        <div class="t_header">
            <span>端午节出行数据展示</span>
        </div>
        <div id="lineChart" class="chart top-left"></div>
        <div id="pieChart" class="chart top-right"></div>
        <div id="barChart" class="chart bottom-left"></div>
        <div id="container" class="bottom-right"></div>
    </div>

初始化 echarts 实例对象

var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
var barChart = echarts.init(document.getElementById('barChart'));

准备配置项

var lineOption = {
    title: {
        text: '日常出行数据统计',
        left: 'center'
    },

    xAxis: {
        type: 'category',
        data: lineData.dates
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        orient: 'verticl',
        left: 'right'
    },
    series: [
        {
            name: '返乡',
            type: 'line',
            data: lineData.numTravelersReturningHome
        },
        {
            name: '旅游',
            type: 'line',
            data: lineData.numTravelersTourism
        }
    ]
};

将配置项设置给 echarts 实例对象

lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
barChart.setOption(barOption);

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>端午节出行数据大屏</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">

    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=3.0&ak=jvM6mGCndWbYcaelCSzvGhnKReqqfq8J"></script>

<body>

    <div class="container">
        <div class="t_header">
            <span>端午节出行数据展示</span>
        </div>
        <div id="lineChart" class="chart top-left"></div>
        <div id="pieChart" class="chart top-right"></div>
        <div id="barChart" class="chart bottom-left"></div>
        <div id="container" class="bottom-right"></div>
    </div>

    <script src="./js/index.js"></script>
</body>

</html>

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    /* 背景色 */
}

#container {
    width: 48%;
    height: 400px;
    transform: scale(0.8);
    transform-origin: center center;
}

/* Additional Styles */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px;
}

.chart {
    width: 48%;
    height: 400px;
    margin-bottom: 20px;
}

h1 {
    font-size: 28px;
    color: #333;
    text-align: center;
    margin-top: 30px;
}

.top-left {
    color: #fff;
    float: left;
    margin-right: 20px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}

.top-right {
    color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
    float: right;
    margin-left: 20px;
}

.bottom-left {
    clear: both;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}

.bottom-right {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.039) inset;
}

.t_header {
    width: 100%;
    height: 80px;
    background: url(../images/linx.png) no-repeat;
    background-size: 100% 80%;
    position: relative;
}

.t_header span {
    color: #fff;
    font-size: 27px;
    position: absolute;
    top: 25%;
    margin-top: -0.24rem;
    left: 9%;
}

var map = new BMap.Map("container");
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 第七步 设置坐标点
var point = new BMap.Point(113.844656, 22.632231);
// 创建标注   
var marker = new BMap.Marker(point);
//拖动标注，显示当前标注点所在的地理位置
marker.enableDragging();
//拖动坐标点并显示坐标点所在的位置
marker.addEventListener("dragend", function (e) {
    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
});

// 将标注添加到地图中 
map.addOverlay(marker);
//标注点添加点击事件
marker.addEventListener("click", function () {
    alert("您点击了标注");
});
// 第八步 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
// Initialize Echarts instances and set sizes
var lineChart = echarts.init(document.getElementById('lineChart'));
var pieChart = echarts.init(document.getElementById('pieChart'));
var barChart = echarts.init(document.getElementById('barChart'));

// Line chart data example
var lineData = {
    dates: ['6月8日', '6月9日', '6月10日', '6月11日', '6月12日'],
    numTravelersReturningHome: [15000, 25000, 20000, 23000, 18000], // Data for travelers returning home
    numTravelersTourism: [5000, 5000, 5000, 5000, 17000] // Data for travelers going on trips
};

// Line chart options
var lineOption = {
    title: {
        text: '日常出行数据统计',
        left: 'center'
    },

    xAxis: {
        type: 'category',
        data: lineData.dates
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        orient: 'verticl',
        left: 'right'
    },
    series: [
        {
            name: '返乡',
            type: 'line',
            data: lineData.numTravelersReturningHome
        },
        {
            name: '旅游',
            type: 'line',
            data: lineData.numTravelersTourism
        }
    ]
};
var pieData = {
    travelMode: ['火车', '大巴', '飞机'],
    numTravelers: [2352, 1115, 3524]
};


// Pie chart options
var pieOption = {
    title: {
        text: '出行工具',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'verticl',
        left: 'right'
    },
    series: [{
        type: 'pie',
        radius: '50%',
        data: pieData.travelMode.map(function (mode, index) {
            return { value: pieData.numTravelers[index], name: mode };
        })
    }]

};

// Bar chart data example
var barData = {
    destinations: ['北京', '洛阳', '南京', '西安', '郑州'],
    numTravelersReturningHome: [5000, 8000, 12000, 6000, 10000],
    numTravelersTourism: [2220, 5000, 231, 25, 12000],
    coordinates: [
        { lng: 116.407526, lat: 39.90403 }, // 北京的经纬度
        { lng: 112.434468, lat: 34.663041 }, // 洛阳的经纬度
        { lng: 118.796877, lat: 32.060255 }, // 南京的经纬度
        { lng: 108.940175, lat: 34.341568 }, // 西安的经纬度
        { lng: 113.625368, lat: 34.7466 } // 郑州的经纬度
    ]
};


var barOption = {
    title: {
        text: '城市情况统计',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        data: barData.destinations
    },
    yAxis: {
        type: 'value'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        orient: 'verticl',
        left: 'right'
    },
    series: [
        {
            name: '返乡',
            type: 'bar',
            data: barData.numTravelersReturningHome
        },
        {
            name: '旅游',
            type: 'bar',
            data: barData.numTravelersTourism
        }
    ]
};

// 柱状图点击事件
barChart.on('click', function (params) {
    var selectedCityIndex = params.dataIndex;
    var selectedCityCoordinates = barData.coordinates[selectedCityIndex];
    var selectedCityName = barData.destinations[selectedCityIndex];

    // 将地图中心点设置为选定城市的经纬度
    map.centerAndZoom(new BMap.Point(selectedCityCoordinates.lng, selectedCityCoordinates.lat), 15);

    // 在选定城市的经纬度上创建新的标注点
    var marker = new BMap.Marker(new BMap.Point(selectedCityCoordinates.lng, selectedCityCoordinates.lat));
    map.clearOverlays(); // 清除之前的标注点
    map.addOverlay(marker);

    // 打开包含选定城市名称的信息窗口
    var infoWindow = new BMap.InfoWindow(selectedCityName);
    marker.openInfoWindow(infoWindow);
});
lineChart.setOption(lineOption);
pieChart.setOption(pieOption);
barChart.setOption(barOption);