标签 echarts 下的文章

2024-08-21

在使用 Element UI 的 el-tabs 组件和 ECharts 图表时，可能会遇到图表宽度自适应的问题。这通常发生在 el-tabs 切换时，因为其中的 el-tab-pane 初始化时宽度可能不正确。

为了解决这个问题，可以在 el-tab-pane 内容初始化或者大小变化时，使用 ECharts 的 resize 方法来更新图表的大小。

以下是一个简单的 Vue 组件示例，展示了如何在 el-tab-pane 变为可见时，更新 ECharts 图表的大小：




<template>
  <el-tabs v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane label="图表A" name="chartA">
      <div ref="chartA" class="chart"></div>
    </el-tab-pane>
    <el-tab-pane label="图表B" name="chartB">
      <div ref="chartB" class="chart"></div>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      activeName: 'chartA',
      myChartA: null,
      myChartB: null,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.myChartA = echarts.init(this.$refs.chartA);
      this.myChartB = echarts.init(this.$refs.chartB);
 
      // 初始化图表
      this.myChartA.setOption({ /* ... */ });
      this.myChartB.setOption({ /* ... */ });
    },
    handleTabClick(tab, event) {
      // 在切换标签时，更新图表大小
      this.myChartA.resize();
      this.myChartB.resize();
    },
  },
};
</script>
 
<style>
.chart {
  width: 100%;
  height: 400px;
}
</style>

在这个示例中，handleTabClick 方法会在标签被点击时触发，并且在其内部调用 resize 方法来更新图表的大小。这确保了每次切换标签时，ECharts 图表都会适应其容器的大小。

- 阅读更多 -

Vue + Echarts实现水波图、水球图、水半球样式、圆形水进度条

System

2024-08-21

所有,vue.js

在Vue中结合Echarts实现水波图、水球图、水半球样式和圆形水进度条，可以通过Echarts的自定义系列（custom series）来实现。以下是一个简单的例子：

首先，确保已经安装了Echarts：




npm install echarts --save

然后，在Vue组件中使用Echarts创建图表：




<template>
  <div ref="waterChart" style="width: 400px; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts/core';
import { WaterWaveSeries } from 'echarts-waterwave'; // 水波图
import { LiquidFillSeries } from 'echarts-liquidfill'; // 水球图
import 'echarts/theme/macarons'; // 主题
 
echarts.use([
  WaterWaveSeries,
  LiquidFillSeries
]);
 
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.waterChart, 'macarons');
 
      const option = {
        series: [
          {
            type: 'waterWave', // 水波图
            coordinateSystem: 'cartesian2d',
            shape: {
              type: 'circle'
            },
            data: [0.7]
            // 其他配置项...
          },
          {
            type: 'liquidFill', // 水球图
            data: [0.4],
            // 其他配置项...
          }
          // 更多系列...
        ]
      };
 
      chart.setOption(option);
    }
  }
};
</script>

在这个例子中，我们使用了echarts-waterwave和echarts-liquidfill两个Echarts的扩展库来提供水波图和水球图的系列。你可以根据需要添加更多的图表样式。记得在项目中安装这些扩展库：




npm install echarts-waterwave echarts-liquidfill

这样就可以在Vue组件中渲染出水波图、水球图等水样式的图表了。

- 阅读更多 -

VUE3.2 项目使用Echarts5.4总结

System

2024-08-21

所有,jquery

在Vue 3.2项目中使用ECharts 5.4，你需要先安装ECharts依赖，然后在组件中引入并使用。以下是一个简单的例子：

安装ECharts依赖：




npm install echarts@5.4.0 --save

在Vue组件中使用ECharts：




<template>
  <div ref="echartsRef" style="width: 600px; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
 
const echartsRef = ref(null);
 
onMounted(() => {
  const chart = echarts.init(echartsRef.value);
  const option = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
 
  chart.setOption(option);
});
</script>
 
<style>
/* 你的样式 */
</style>

在这个例子中，我们使用ref来获取DOM元素作为ECharts的容器，然后在onMounted生命周期钩子中初始化ECharts实例，并设置配置项。这样就可以在Vue 3.2项目中使用ECharts 5.4了。

System

2024-08-21

所有,jquery

以下是一个简化的代码示例，展示了如何使用jQuery和ECharts创建一个简单的中国地图，点击省份后弹出该省份的城市地图。




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 中国省市地图</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <!-- 引入 jQuery 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 地图数据
        var mapData = {};
        mapData['北京'] = []; // 假设北京没有下级城市
        mapData['上海'] = []; // 假设上海没有下级城市
        mapData['广东'] = ['广州', '深圳', '佛山', '佛门'];
        // ... 其他省份和城市数据
 
        // 指定图表的配置项和数据
        var option = {
            series: [{
                type: 'map',
                map: 'china'
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
        // 点击事件
        myChart.on('click', function (params) {
            var cityName = params.name;
            var cities = mapData[cityName];
            if (cities && cities.length > 0) {
                // 创建城市地图的 ECharts 实例
                var cityChart = echarts.init(document.createElement('div'));
                cityChart.setOption({
                    series: [{
                        type: 'map',
                        map: 'china',
                        data: cities.map(function (city) {
                            return {
                                name: city,
                                value: Math.round(Math.random() * 1000)
                            };
                        })
                    }]
                });
                // 显示城市地图
                document.body.appendChild(cityChart.getDom());
                // 弹出地图
                cityChart.showLoading();
                setTimeout(function () {
                    cityChart.hideLoading();
                }, 1000);
            }
        });
 
        // 为了简化示例，这里使用了定时器来隐藏加载动画，实际使用时应该在数据加载完成后隐藏
    </script>
</body>
</html>

这段代码创建了一个基础的中国地图，并且当用户点击某个省份时，会检查是否有下级城市地图，如果有，则会创建一个新的ECharts实例来显示这些城市的数据。这里使用了一个简化的mapData对象来表示省份和城市之间的关系，实际应用中可以通过AJAX从服务器获取动态数据。

System

2024-08-21

所有,jquery

解决Echarts使用本地JSON文件加载不出图表的问题，通常是因为路径问题或者文件格式问题。

路径问题：确保JSON文件的路径是正确的。如果JSON文件与HTML页面位于同一目录下，直接使用文件名即可。如果不在同一目录，需要指定正确的相对路径或绝对路径。
文件格式问题：确保JSON文件的格式正确，并且是Echarts所支持的格式。JSON文件应该是一个合法的JSON对象或数组。

解决方法：

检查并修正文件路径。
确保JSON文件内容格式正确。
如果使用了Echarts的数据预处理功能（如dataZoom或series中的data），确保预处理逻辑正确。

对于jQuery访问本地JSON文件跨域问题，通常是浏览器的同源策略导致的。在本地测试环境下，可以通过以下方法解决：

使用相对协议（如file://）来访问本地资源，这样不会有跨域限制。
使用本地服务器（如Apache, Nginx或Node.js）来托管你的HTML和JSON文件，这样可以避免跨域问题。

解决方法：

使用本地服务器托管文件，而不是直接打开HTML文件。
如果使用Node.js等服务器，可以通过CORS设置来允许跨域请求。

请根据具体情况选择合适的解决方案。

- 阅读更多 -

echarts 3D柱状图

System

2024-08-21

所有,jquery

ECharts 3D 柱状图可以使用 ECharts 的 bar3D 图表类型来实现。以下是一个简单的 ECharts 3D 柱状图示例代码：




<!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 src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/echarts-gl.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            tooltip: {},
            visualMap: {
                max: 20,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {},
            yAxis3D: {},
            zAxis3D: {},
            grid3D: {
                viewControl: {
                    // projection: 'orthographic'
                }
            },
            series: [{
                type: 'bar3D',
                data: [[0, 0, 5], [1, 0, 3], [2, 0, 2], [3, 0, 1], [4, 0, 1], [5, 0, 1], [6, 0, 1], [7, 0, 1], [8, 0, 1], [9, 0, 1]],
                shading: 'color',
                // 3D 柱状图的宽度
                barSize: 0.8,
                // 3D 柱状图的深度
                depthSize: 0.8
            }]
        };
 
        myChart.setOption(option);
 
        window.onresize = function () {
            myChart.resize();
        };
    </script>
</body>
</html>

这段代码中，我们首先通过 <script> 标签引入了 ECharts 的库和 ECharts-GL 的扩展库。然后，我们初始化了一个 ECharts 实例，并设置了一个包含 3D 柱状图的配置项 option。在 series 中，我们定义了 type 为 'bar3D' 的数据系列，并提供了一些示例数据。

这个示例提供了一个简单的 3D 柱状图，你可以根据自己的需求调整数据和配置项来定制你的图表。

- 阅读更多 -

vue3+Ts+Echarts 使用

System

2024-08-21

所有,typescript

在Vue 3和TypeScript中使用ECharts的基本步骤如下：

安装ECharts：




npm install echarts --save

在Vue组件中引入ECharts：




import * as echarts from 'echarts';

在组件的setup函数中创建一个响应式的ref来引用图表容器：




import { ref, onMounted } from 'vue';
 
const chartRef = ref<null | HTMLElement>(null);
const chartInstance = ref<null | echarts.ECharts>(null);

使用onMounted钩子初始化图表并设置选项：




onMounted(() => {
  if (chartRef.value) {
    chartInstance.value = echarts.init(chartRef.value);
    chartInstance.value!.setOption({
      // ECharts 配置项
    });
  }
});

在模板中添加图表容器并引用chartRef：




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

下面是一个简单的Vue 3和TypeScript的ECharts示例：




<template>
  <div ref="chartRef" style="width: 600px; height: 400px;"></div>
</template>
 
<script lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
 
export default {
  setup() {
    const chartRef = ref<null | HTMLElement>(null);
    const chartInstance = ref<null | echarts.ECharts>(null);
 
    onMounted(() => {
      if (chartRef.value) {
        chartInstance.value = echarts.init(chartRef.value);
        chartInstance.value!.setOption({
          title: {
            text: 'ECharts 示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        });
      }
    });
 
    return {
      chartRef
    };
  }
};
</script>

确保你的Vue项目配置了TypeScript支持，并正确引入了ECharts库。这个例子创建了一个简单的条形图，在组件加载时会在指定的DOM元素中渲染。

System

2024-08-21

所有,typescript




<template>
  <div ref="chartRef" :style="{ width: '600px', height: '400px' }"></div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
 
export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    let chartInstance: echarts.ECharts | null = null;
 
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let total = 0;
          const result = params[0].seriesName + '<br/>';
          params.forEach((item: any) => {
            if (item.data) {
              total += item.data;
            }
          });
          return result + '总计: ' + total + ' 元';
        }
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [23, 45, 56, 78]
        }
      ]
    };
 
    onMounted(() => {
      if (chartRef.value) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance.setOption(option);
      }
    });
 
    watch(chartRef, (newValue) => {
      if (newValue) {
        chartInstance = echarts.init(newValue);
        chartInstance.setOption(option);
      }
    });
 
    return {
      chartRef
    };
  }
});
</script>

这段代码使用Vue 3和TypeScript创建了一个ECharts图表，并在tooltip的formatter函数中实现了自定义内容和数据求和的功能。在这个例子中，我们定义了一个tooltip对象，其中formatter函数用于接收ECharts传递的参数，并计算这些参数的总和，然后返回自定义的字符串格式。这展示了如何在ECharts中使用tooltip的formatter函数来自定义提示框的内容。

- 阅读更多 -

数据可视化-ECharts Html项目实战

System

2024-08-21

所有,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;
        myChart.showLoading();
        $.getJSON('path/to/your/data.json', function (data) {
            myChart.hideLoading();
            myChart.setOption(option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2012', '2013', '2014', '2015', '2016', '2017']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                series: [
                    {
                        name: '2012',
                        type: 'bar',
                        data: data.data2012
                    },
                    {
                        name: '2013',
                        type: 'bar',
                        data: data.data2013
                    },
                    {
                        name: '2014',
                        type: 'bar',
                        data: data.data2014
                    },
                    {
                        name: '2015',
                        type: 'bar',
                        data: data.data2015
                    },
                    {
                        name: '2016',
                        type: 'bar',
                        data: data.data2016
                    },
                    {
                        name: '2017',
                        type: 'bar',
                        data:

- 阅读更多 -

vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化

System

2024-08-21

所有,vue.js

要在Vue中使用echarts和echarts-gl来实现某个省份地图的3D可视化，你需要首先安装这两个库，然后创建一个Vue组件来初始化和配置echarts实例。

以下是一个简单的例子：

安装echarts和echarts-gl：




npm install echarts echarts-gl

创建Vue组件（例如 ProvinceMap3D.vue）：




<template>
  <div ref="mapContainer" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { provinceName } from './provinceData'; // 假设有一个包含省份名称和相关数据的模块
 
export default {
  name: 'ProvinceMap3D',
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.mapContainer);
      const option = this.getOption();
      this.myChart.setOption(option);
    },
    getOption() {
      return {
        // echarts配置项
        tooltip: {},
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
          },
        },
        geo3D: {
          viewControl: {
            // 配置3D地图的视角
            autoRotate: false,
          },
          map: provinceName, // 这里填入省份名称
        },
        series: [
          {
            type: 'map3D',
            coordinateSystem: 'geo3D',
            data: [
              // 示例数据
              {
                name: '某地名',
                value: 100,
              },
              // 更多数据...
            ],
          },
        ],
      };
    },
  },
};
</script>

在你的主组件或页面中引入并使用 ProvinceMap3D 组件。

确保你有对应省份的地图数据，如果没有，你可能需要使用echarts的地图下载器来生成或者使用在线的地图服务。

注意：以上代码示例假设你已经有了包含省份名称的 provinceData 模块。实际使用时，你需要替换为正确的省份名称和数据。

- 阅读更多 -