标签 echarts 下的文章

2024-08-14

ECharts 目前官方版本不直接支持 3D 柱状图，但可以通过一些技巧实现类似效果。以下是两种实现方式：

使用 scatter3D 和 grid3D 实现伪3D效果：




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: 'scatter3D',
        data: [[0, 0, 0], [1, 1, 1], [2, 2, 2], [3, 3, 3], [4, 4, 4]],
        symbolSize: 10,
        itemStyle: {
            color: 'rgba(255, 128, 0, 0.8)'
        }
    }]
};

使用 custom 系列和 WebGL 渲染器：




var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('main'),
    antialias: true
});
 
var camera = new THREE.PerspectiveCamera(45, 600 / 400, 0.1, 100);
camera.position.set(0, 0, 5);
 
var scene = new THREE.Scene();
 
// 创建3D柱状图
var geometry = new THREE.BoxGeometry(1, 2, 3);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
renderer.render(scene, camera);
 
// 然后在 ECharts 的 'rendered' 事件中更新 Three.js 的渲染
myChart.on('rendered', function () {
    renderer.render(scene, camera);
});

第一种方法通过配置 scatter3D 系列模拟3D效果，但真实的3D效果和功能还有待完善。第二种方法需要使用 WebGL 渲染器和 Three.js 库，能实现真正的3D效果，但需要开发者具备较强的3D绘图知识。

由于ECharts官方没有提供原生的3D柱状图支持，因此这些方法并非使用ECharts的官方接口，但可以作为实现3D柱状图的参考。

- 阅读更多 -

探索数据之美：go-echarts-examples项目深度解析与应用推荐

System

2024-08-13

所有,golang




package main
 
import (
    "github.com/go-echarts/go-echarts/v2/charts"
    "github.com/go-echarts/go-echarts/v2/opts"
    "github.com/go-echarts/go-echarts/v2/types"
)
 
func main() {
    // 创建一个柱状图实例
    bar := charts.NewBar()
 
    // 设置图表的全局选项
    bar.SetGlobalOptions(
        charts.WithTitleOpts(opts.Title{Title: "我的柱状图"}),
        charts.WithDataZoomOpts(opts.DataZoom{Type: types.DataZoomTypeSlider}),
    )
 
    // 添加一个系列到图表中
    bar.SetXAxis([]string{"A", "B", "C", "D", "E", "F"})
    bar.SetSeriesOptions(charts.SeriesOpts{Label: opts.Label{Show: true}})
    bar.AddSeries("系列1", []int{10, 20, 30, 40, 50, 60})
 
    // 在div中渲染图表
    bar.Render("chart_div")
}

这段代码演示了如何使用go-echarts库创建一个基本的柱状图，并设置了图表的全局选项，如标题和数据区域缩放。然后，它添加了一些数据和一个系列，并在HTML中的一个div元素内渲染了这个图表。这个例子简单明了，并且可以直接运行，是学习ECharts和go-echarts库的一个很好的起点。

- 阅读更多 -

基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）

System

2024-08-13

所有,html

以下是一个简化的HTML代码示例，展示了如何使用ECharts创建一个基本的数据可视化大屏：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
 
        var option = {
            title: {
                text: '数据可视化大屏'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码首先通过<script>标签引入了ECharts库。然后，使用echarts.init方法初始化一个ECharts实例，并通过setOption方法设置图表的配置项和数据。这个基本示例创建了一个简单的柱状图，展示了不同商品的销量。

- 阅读更多 -

Vue 3 如何按需引入 ECharts（高性能图表组件）

System

2024-08-13

所有,vue.js

在Vue 3中按需引入ECharts，你可以使用unplugin-vue-components插件来自动按需引入ECharts组件，或者手动引入所需的图表。

首先，确保你已经安装了ECharts：




npm install echarts --save

然后，你可以在Vue组件中这样使用：




// 手动按需引入
import * as echarts from 'echarts/core';
import {
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import {
  CanvasRenderer
} from 'echarts/renderers';
 
// 注册必需的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer
]);
 
export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.chart.setOption({
      // ... ECharts 配置项
    });
  },
  // 如果需要在组件销毁时清理资源
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};




<!-- 在模板中定义图表容器 -->
<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

如果你想使用自动按需引入的方式，可以使用unplugin-vue-components插件，首先安装它：




npm install unplugin-vue-components --save-dev

然后，在Vue项目的Vite配置文件中配置插件：




// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
export default defineConfig({
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

之后，你可以直接在组件中使用ECharts组件，插件会自动引入所需的图表和组件：




// Vue 组件
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
 
export default {
  setup() {
    const chartRef = ref(null);
    const chartInstance = ref(null);
 
    onMounted(() => {
      chartInstance.value = echarts.init(chartRef.value);
      // ... 设置图表选项
    });
 
    onBeforeUnmount(() => {
      if (chartInstance.value) {
        chartInstance.value.dispose();
      }
    });
 
    return {
      chartRef
    };
  }
};




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

请注意，这些代码示例是基于假设你正在使用Vite作为构建工具。如果你使用的是Webpack，你可能需要相应地调整配置。

- 阅读更多 -

Pyecharts 输出到 html 白屏？终极解决方案来了。

System

2024-08-13

所有,html

报错问题描述：使用 Pyecharts 库输出图表到 HTML 文件时，页面出现空白，没有图表显示。

可能原因及解决方法：

Chart 对象未被添加到 HTML 文件中：
确保使用 render() 方法将图表渲染到 HTML 文件中。
```
chart.render("output.html")
```
文件路径问题：
确保指定的文件路径正确，且有写入权限。
JavaScript 资源未加载：
确保 HTML 文件中正确引入了 Pyecharts 所需的 JavaScript 资源。
浏览器兼容性问题：
尝试在不同的浏览器中打开 HTML 文件，检查是否是浏览器兼容性问题。
图表数据问题：
确保传递给图表的数据是有效的，没有空值或异常数据。
版本兼容性问题：
确保 Pyecharts 库的版本与浏览器中的 JavaScript 资源版本相兼容。
资源加载失败：
检查网络环境，确保没有防火墙或代理设置阻止资源加载。
CSS 样式冲突：
如果使用了自定义 CSS 样式，检查是否有样式冲突。

如果以上方法都不能解决问题，可以尝试以下步骤：

查看控制台错误：
打开浏览器的开发者工具，查看控制台是否有错误信息，根据错误信息进行调试。
检查 HTML 代码：
直接打开生成的 HTML 文件，检查是否有缺失的标签或者资源引用错误。
更新 Pyecharts：
尝试更新 Pyecharts 到最新版本，看是否有已知的 bug 修复。
查看官方文档：
查看 Pyecharts 的官方文档或者社区，看是否有其他用户遇到类似问题，并找到解决方案。
寻求社区帮助：
在 Pyecharts 的社区或者 Stack Overflow 等平台发帖求助，提供足够的信息以便他人帮助解决问题。

总结，解决 Pyecharts 输出到 HTML 白屏问题的关键是确保图表正确渲染，文件路径正确，依赖资源正确加载，且没有其他冲突或错误。

- 阅读更多 -

vue3+echarts：Vue中使用echarts从后端获取数据并赋值显示

System

2024-08-13

所有,vue.js

在Vue 3中，您可以使用组合式API（Composition API）来实现从后端获取数据并在echarts中展示。以下是一个简单的例子：

安装echarts：




npm install echarts --save

在Vue组件中使用echarts：




<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
 
const chartContainer = ref(null);
const chartData = ref([]);
 
onMounted(() => {
  fetchData();
});
 
const fetchData = async () => {
  try {
    const response = await axios.get('YOUR_BACKEND_ENDPOINT');
    chartData.value = response.data;
    drawChart();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};
 
const drawChart = () => {
  const chart = echarts.init(chartContainer.value);
  const option = {
    // echarts配置项
    series: [
      {
        type: 'bar',
        data: chartData.value
      }
    ]
  };
  chart.setOption(option);
};
</script>

在这个例子中，我们首先导入echarts和axios。在onMounted生命周期钩子中，我们调用fetchData函数从后端获取数据。然后，我们在fetchData中使用axios发送GET请求，并在成功获取数据后更新图表。最后，drawChart函数使用获取到的数据初始化echarts图表并设置配置项。

- 阅读更多 -

使用Node-RED爬虫并基于ECharts可视化某楼盘的销售情况

System

2024-08-13

所有,爬虫

以下是一个简化的Node-RED流定义，用于从一个API获取数据，并通过ECharts在网页上显示结果。




[
    {
        "id": "node-red-start",
        "type": "tab",
        "label": "Start",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1a9d8e1e.8c6158",
        "type": "ui_group",
        "name": "Estate Sales Dashboard",
        "tab": "node-red-start",
        "disp": true,
        "width": "6",
        "collapse": false,
        "libs": [
            "core",
            "dashboard"
        ]
    },
    {
        "id": "2256e46e.8c615",
        "type": "ui_chart",
        "name": "",
        "tab": "node-red-start",
        "disp": true,
        "width": "6",
        "height": "4",
        "format": "timeseries",
        "template": "{\"title\":{\"text\":\"Estate Sales\"},\"tooltip\":{\"trigger\":\"axis\"},\"legend\":{\"data\":[\"Sales\"]},\"xAxis\":{\"type\":\"category\",\"boundaryGap\":false,\"data\":[]},\"yAxis\":{\"type\":\"value\"},\"series\":[{\"name\":\"Sales\",\"type\":\"line\",\"data\":[]}]}",
        "xaxis": {
            "label": "Date",
            "scale": "linear"
        },
        "yaxis": {
            "label": "Sales",
            "scale": "linear",
            "min": 0
        },
        "src": "msg.payload",
        "wires": []
    },
    {
        "id": "3edc618e.8c6158",
        "type": "ui_base",
        "name": "",
        "tab": "node-red-start",
        "disp": true,
        "width": "6",
        "height": "6",
        "theme": {
            "name": "theme-light",
            "lightTheme": {
                "default": "#ffffff",
                "darker": "#cccccc",
                "text": "#000000",
                "dashboard": {
                    "background": "#ffffff",
                    "grid": "#dddddd",
                    "canvas": "#e9e9e9",
                    "border": "#aaaaaa",
                    "text": "#000000"
                }
            },
            "darkTheme": {
                "default": "#222222",
                "darker": "#555555",
                "text": "#ffffff",
                "dashboard": {
                    "background": "#222222",
                    "grid": "#444444",
                    "canvas": "#666666",
                    "border": "#888888",
                    "text": "#ffffff"
                }
            }
        },
        "wires": [
            [
                "2256e46

System

2024-08-13

所有,typescript




<template>
  <el-row :gutter="20">
    <el-col :span="6" :offset="6">
      <div class="chart-wrapper">
        <pie-chart :chart-data="pieData" />
      </div>
    </el-col>
  </el-row>
</template>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import PieChart from '@/components/PieChart.vue'; // 假设PieChart组件已创建
 
@Component({
  components: {
    PieChart
  }
})
export default class PieChartExample extends Vue {
  private pieData = {
    title: '浏览器占有率',
    data: [
      { name: 'Chrome', value: 60 },
      { name: 'Firefox', value: 20 },
      { name: 'Safari', value: 10 },
      { name: 'Internet Explorer', value: 15 },
      { name: 'Opera', value: 5 }
    ]
  };
}
</script>
 
<style scoped>
.chart-wrapper {
  height: 400px;
}
</style>

这个代码实例展示了如何在Vue应用中使用Element UI和ECharts创建一个饼图。pieData 是传递给 PieChart 组件的数据，它包括了饼图的标题和数据点。PieChart 组件需要实现接收 chartData 属性并使用ECharts渲染饼图。注意，这个例子假设 PieChart.vue 组件已经被创建并且实现了与ECharts的集成。

- 阅读更多 -

VUE整合Echarts实现简单的数据可视化

System

2024-08-13

所有,vue.js




<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户来源</span>
          </div>
          <div ref="sourceChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户分布</span>
          </div>
          <div ref="distributionChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: 'UserAnalysis',
  data() {
    return {
      sourceData: {
        legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        series: [33, 22, 33, 55, 66]
      },
      distributionData: {
        legend: ['桌面', '移动', '平板'],
        series: [33, 22, 44]
      }
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const sourceChart = echarts.init(this.$refs.sourceChart);
      const distributionChart = echarts.init(this.$refs.distributionChart);
 
      const option = {
        color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: this.sourceData.series.map((value, index) => ({ value, name: this.sourceData.legend[index] }))
          }
        ]
      };
 
      sourceChart.setOption(option);
 
      const distributionOption = {
        color: ['#5470C6', '#91CC75', '#FAC858'],
        series: [
          {
            name: '设备分布',
            type: 'pie',
            radius: '55%',
            data: this.distributionData.series.map((value, index) => ({ value, name: this.distributionData.legend[index] }))
          }
        ]
      };
 
      distributionChart.setOption(distributionOption);
    }
  }
};
</script>
 
<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>

这个代码实例使用Vue和Element UI来构建用户界面，并通过ECharts绘制图表。在data函数中定义了两组用于ECharts图表的数据，在mounted钩子中调用initCharts方法来初始化图表。initCharts方法中使用ECharts的实例方法init来在对应的DOM元素上初始化图表，并设置相应的配置项。这个例子展示了如何在Vue项目中整合ECharts，并简单地展示了两个饼图的绘制。

- 阅读更多 -

使用React Native创建响应式的Echarts组件

System

2024-08-12

所有,react native




import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions, Platform } from 'react-native';
import PropTypes from 'prop-types';
import ECharts, { echarts } from 'react-native-echarts';
 
const { width, height } = Dimensions.get('window');
 
class ResponsiveEcharts extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      height: 0,
      width: 0,
    };
    this.onLayout = this.onLayout.bind(this);
  }
 
  onLayout(event) {
    const { height, width } = event.nativeEvent.layout;
    if (this.state.height !== height || this.state.width !== width) {
      this.setState({ height, width });
    }
  }
 
  render() {
    const { option } = this.props;
    const { height: stateHeight, width: stateWidth } = this.state;
 
    const height = stateHeight || height;
    const width = stateWidth || width;
 
    return (
      <View style={styles.container} onLayout={this.onLayout}>
        <ECharts
          ref={(echarts) => { this.echarts = echarts; }}
          height={height}
          width={width}
          option={option}
          onChartReady={this.onChartReady}
          {...this.props}
        />
      </View>
    );
  }
}
 
ResponsiveEcharts.propTypes = {
  option: PropTypes.object.isRequired,
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
 
export default ResponsiveEcharts;

这段代码使用React Native和ECharts创建了一个名为ResponsiveEcharts的组件，该组件能够响应屏幕的宽度和高度变化。它使用了React的生命周期钩子和样式来确保图表能够适应不同的屏幕尺寸。这是一个很好的实践，可以作为创建响应式图表组件的参考。

- 阅读更多 -