标签 echarts 下的文章

Vue 使用 Apache Echarts 绘制3d地图、水波动画，插入自定义图标

2024-08-10




<template>
  <div ref="map3d" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts/core';
import { Map3D, Graph3D } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { map3DRegist } from 'echarts-gl/core';
import { geo3D } from 'echarts/extension/dataTool';
import { getMap3DData } from './map3DData';
 
echarts.use([
  Map3D,
  Graph3D,
  CanvasRenderer,
  geo3D,
  map3DRegist
]);
 
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.map3d);
    const option = this.getOption();
    myChart.setOption(option);
  },
  methods: {
    getOption() {
      const map3DData = getMap3DData();
      const option = {
        // 省略其他配置项...
        series: [
          {
            type: 'map3D',
            // 省略地图配置...
          },
          {
            type: 'graph3D',
            coordinateSystem: 'map3D',
            // 省略图形配置...
          },
          {
            type: 'lines3D',
            coordinateSystem: 'map3D',
            // 省略线条配置...
          }
        ]
      };
      return option;
    }
  }
};
</script>

这个代码实例展示了如何在Vue中使用ECharts的map3D和graph3D组件来绘制3D地图，并插入自定义图标。首先，通过echarts.use()注册所需的组件。然后，在mounted钩子函数中初始化ECharts实例，并设置配置项。配置项中定义了三个series，分别用于展示3D地图、图形和线条，这些都是Apache ECharts 3D地图功能的核心组件。

System

2024-08-09

所有,html5




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            // ECharts 图表配置项
        };
 
        myChart.setOption(option);
 
        // 自适应窗口大小
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>
</html>

这个代码实例展示了如何在HTML5页面中使用ECharts图表库。首先，我们通过<script>标签引入ECharts的minified版本。然后，我们使用echarts.init方法初始化一个图表实例，并将其绑定到页面上ID为container的元素。接着，我们设置图表的配置项option，这是ECharts图表的核心部分。最后，我们添加了一个事件监听器来处理窗口大小改变事件，使图表能够自适应不同的屏幕尺寸。

- 阅读更多 -

结合html与Echarts绘制饼状图

System

2024-08-09

所有,html




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>
</html>

这段代码创建了一个简单的饼状图，使用ECharts库来渲染图表。图表的配置项包括标题、工具提示、图例和系列数据（饼图的数据）。这个例子展示了如何将ECharts集成到一个HTML页面中，并设置了基本的图表选项。

- 阅读更多 -

基于Flask+Echarts+爬虫的疫情监控系统

System

2024-08-09

所有,爬虫

由于这个问题涉及的内容较多，我将提供一个简化版的例子，展示如何使用Flask、Echarts和爬虫来创建一个简单的疫情监控系统。

首先，安装所需的库：




pip install flask echarts pymysql requests

下面是一个简化版的例子：




from flask import Flask, render_template, request
import requests
import json
import pandas as pd
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data')
def get_data():
    # 假设爬取的数据接口
    url = 'http://api.example.com/data'
    response = requests.get(url)
    data = response.json()
    return json.dumps(data, ensure_ascii=False)
 
if __name__ == '__main__':
    app.run(debug=True)

在templates目录下创建index.html文件，并添加Echarts初始化代码：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>疫情监控系统</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '疫情监控'
            },
            tooltip: {},
            legend: {
                data:['确诊','死亡']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '确诊',
                type: 'bar',
                data: []
            },{
                name: '死亡',
                type: 'bar',
                data: []
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 动态获取数据
        fetch('/get_data')
            .then(response => response.json())
            .then(data => {
                // 更新图表的数据
                myChart.setOption({
                    series: [{
                        name: '确诊',
                        data: data.confirmed
                    }, {
                        name: '死亡',
                        data: data.deaths
                    }]
                });
            });
    </script>
</body>
</html>

这个简单的例子展示了如何使用Flask和Echarts来创建一个基础的Web应用，并使用JavaScript的fetch函数来异步获取数据。实际应用中，你需要根据你的爬虫获取的数据接口来调整

System

2024-08-09

所有,html5

以下是一个简化版的ECharts代码示例，用于在HTML页面中展示一个基本的柱状图：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
 
        myChart.showLoading();
        // 使用 ECharts 内置的 month 和 day 数据，这里可以替换成你的数据源
        $.get('https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataTool.min.js').done(function (dataTool) {
            // 这里的 'data' 是模拟的数据，你应该替换成你的实际数据
            var data = [
                {name: '类别1', value: 10},
                {name: '类别2', value: 20},
                {name: '类别3', value: 30}
            ];
            var dataset = dataTool.dataset(data, [
                {
                    seriesIndex: 0,
                    dataDimensionIndex: 0 // 表示这部分数据是X轴的数据
                },
                {
                    seriesIndex: 0,
                    dataDimensionIndex: 1 // 表示这部分数据是Y轴的数据
                }
            ]);
            myChart.hideLoading();
            myChart.setOption(option = {
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {type: 'category', data: dataset.source[0].data},
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: dataset.source[1].data
                }]
            });
        });
 
    </script>
</body>
</html>

这段代码展示了如何在HTML页面中使用ECharts库创建一个简单的柱状图。你需要替换数据源和数据以展示你自己的数据。记得在你的服务器环境中提供ECharts库的链接。

- 阅读更多 -

基于 HTML+ECharts 实现智慧安防数据可视化大屏

System

2024-08-09

所有,html

以下是一个基于HTML和ECharts实现的智慧安防数据可视化大屏的简化示例代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            // 此处填入ECharts配置项
        };
 
        myChart.setOption(option);
 
        // 自适应窗口大小
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，其中包含了一个用于渲染ECharts图表的div元素。我们通过echarts.init方法初始化ECharts实例，并通过setOption方法设置图表配置项。最后，我们添加了一个窗口大小变化的监听器，以确保图表可以响应窗口大小的变化。

请注意，实际的ECharts配置项需要根据实际的数据和可视化需求来设置。这个示例仅展示了如何创建基础的ECharts图表容器和基本的ECharts初始化代码。

- 阅读更多 -

关于使用原生Ajax+ECharts图片无法显示的问题-解决方案

System

2024-08-09

所有,ajax

在使用原生Ajax加载数据并在ECharts中显示图表时，如果图表中的图片无法显示，可能是由于跨域问题或者图片资源没有正确加载。

解决方案：

确保图片资源的URL是正确的，并且服务器端允许跨域请求（CORS）。如果图片资源存储在不同的域上，需要服务器配置相应的CORS策略。
在ECharts的option中正确设置图片的路径。如果是相对路径，确保路径是相对于加载ECharts的页面。
如果是动态加载图表，确保在Ajax请求成功返回图片URL后，再设置ECharts的option。
检查网络请求，确认图片资源是否成功加载。可以在浏览器的开发者工具中查看网络请求记录。

示例代码：




// 假设已经初始化了echarts实例为myChart
 
// 发起Ajax请求获取图表数据和图片资源
fetch('data-url')
  .then(response => response.json()) // 假设返回的是JSON数据
  .then(data => {
    // 假设返回的数据中包含图片链接
    let imageUrl = data.imageUrl; // 获取图片链接
 
    // 设置ECharts的option
    let option = {
      series: [{
        type: 'pie',
        data: data.chartData,
        // 设置图片
        itemStyle: {
          image: imageUrl,
          // 其他样式设置
        }
      }]
    };
 
    // 设置ECharts的选项
    myChart.setOption(option);
  })
  .catch(error => {
    console.error('Error fetching data or rendering chart:', error);
  });

确保服务器端对图片资源的请求返回正确的响应，并且CORS配置正确。如果问题依然存在，可能需要检查ECharts版本兼容性或查看ECharts的官方文档寻找更多的解决方案。

- 阅读更多 -

vue echarts 饼状图加百分比

System

2024-08-09

所有,vue.js

在 Vue 中使用 ECharts 创建饼状图并显示百分比可以通过以下步骤实现：

安装 ECharts 依赖：




npm install echarts --save

在 Vue 组件中引入 ECharts：




import * as echarts from 'echarts';

在组件的模板部分添加一个用于渲染饼状图的容器：




<template>
  <div ref="pieChart" style="width: 400px; height: 400px;"></div>
</template>

在组件的 mounted 钩子中初始化 ECharts 实例并设置饼状图的配置：




export default {
  mounted() {
    const chart = echarts.init(this.$refs.pieChart);
    const option = {
      series: [
        {
          type: 'pie',
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          label: {
            show: true,
            formatter: '{b}: {d}%' // 显示百分比
          }
        }
      ]
    };
    chart.setOption(option);
  }
};

这样就会创建一个饼状图，并且每个扇区旁边都显示对应的百分比。

- 阅读更多 -

使用React Native绘制图表（使用ECharts）

System

2024-08-08

所有,react native




import React, { Component } from 'react';
import { View } from 'react-native';
import echarts from 'echarts';
 
class EChartsComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {
        title: {
          text: 'ECharts 示例图表'
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    };
  }
 
  componentDidMount() {
    this.renderChart();
  }
 
  renderChart = () => {
    const chart = echarts.init(this.chartContainer);
    chart.setOption(this.state.option);
  }
 
  render() {
    return (
      <View
        style={{ height: 300, width: '100%' }}
        ref={(c) => { this.chartContainer = c; }}
      />
    );
  }
}
 
export default EChartsComponent;

这段代码演示了如何在React Native中使用ECharts绘制一个简单的条形图。首先，在constructor中定义了图表的配置option，包括标题、工具提示、图例、X轴、Y轴和一系列数据。在componentDidMount中，我们通过引用组件的DOM节点初始化ECharts实例，并应用配置好的option来绘制图表。

System

2024-08-08

所有,vue.js

要使用Vue和ECharts绘制中国地图，包括3D地图、省、市、县三级下钻以及回钻，并实现南海诸岛小窗化的功能，你可以参考以下步骤和代码示例：

安装ECharts和Vue-ECharts：




npm install echarts vue-echarts

在Vue项目中引入Vue-ECharts：




import Vue from 'vue'
import ECharts from 'vue-echarts'
import 'echarts/map/js/china.js' // 中国地图数据
 
Vue.component('v-chart', ECharts)

创建地图组件：




<template>
  <v-chart ref="mapChart" :option="chartOption" @click="handleMapClick"></v-chart>
</template>
 
<script>
export default {
  data() {
    return {
      chartOption: {
        // 初始地图选项
      }
    }
  },
  methods: {
    handleMapClick(event) {
      // 地图点击事件处理
    },
    updateMap(option) {
      // 更新地图配置
      this.chartOption = option;
    }
  },
  mounted() {
    // 初始化地图
    this.updateMap({
      // 省份地图配置
    });
  }
}
</script>

实现地图下钻和回钻逻辑：




methods: {
  handleMapClick(event) {
    const { name } = event.data;
    if (name === '中国') {
      // 点击中国地图，展示省份地图
      this.updateMap({
        // 省份地图配置
      });
    } else if (name === '某省') {
      // 点击省份，展示市级地图
      this.updateMap({
        // 市级地图配置
      });
    } else if (name === '某市') {
      // 点击市级，展示区/县地图或回溯
      this.updateMap({
        // 区/县地图配置或回溯到省份地图配置
      });
    }
  },
  updateMap(option) {
    this.chartOption = option;
  }
}

添加3D地图支持：




updateMap(option) {
  this.chartOption = {
    ...option,
    // 添加3D地图配置
    visualMap: {
      show: false,
      min: 0,
      max: 200,
      inRange: {
        colorLightness: [0, 1]
      }
    },
    series: [{
      type: 'map3D',
      // 省份地图数据
    }]
  };
}

实现南海诸岛小窗化：




updateMap(option) {
  this.chartOption = {
    ...option,
    series: [{
      type: 'map3D',
      // 省份地图数据
      // 添加特殊区域（南海几个岛屿）的配置
    }]
  };
}

以上代码提供了地图下钻、回溯、3D地图展示以及南海诸岛小窗化的基本框架。具体的地图数据和配置需要根据ECharts的文档和实际需求进行设置。

- 阅读更多 -