Echarts学习方法分享:跳过新手期,光速成为图表仙人!

发布于:2025-07-17 ⋅ 阅读:(13) ⋅ 点赞:(0)

今日为大家分享一个echarts组件的学习思路。教你从实战中逐步学会二charts。这也是本人自新入行以来一直学习的一个方法,感觉非常有用。大部分代码只需要复制粘贴,就可以轻松制作出高档的图表。废话不再多说,先奉上本人封装的echarts组件代码:

ECharts 组件封装

1. 封装思路

将 ECharts 的初始化、更新等操作封装到一个独立的 Vue 组件中,通过 props 接收图表配置项,实现组件的复用。

2. 封装步骤

在 @/web/views/components/echarts/index.vue 中创建组件:

<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

let myChart = null;

onMounted(() => {
  myChart = echarts.init(chartRef.value);
  myChart.setOption(props.options);
});

watch(() => props.options, (newOptions) => {
  if (myChart) {
    myChart.setOption(newOptions);
  }
}, { deep: true });

// 暴露初始化图表的方法
const initChart = (options) => {
  if (myChart) {
    myChart.setOption(options);
  }
};

defineExpose({
  initChart
});
</script>
2.2 组件解释
  • 模板部分:创建一个 div 元素作为 ECharts 图表的容器。
  • 脚本部分
    • 使用 ref 引用图表容器。
    • 通过 props 接收图表配置项 options
    • 在 onMounted 钩子中初始化 ECharts 实例并设置配置项。
    • 使用 watch 监听 options 的变化,实时更新图表。
    • 暴露 initChart 方法,方便外部调用更新图表

ECharts 使用思路

1. 引入 ECharts 组件

在 index.vue 中引入封装好的 ECharts 组件:

<template>
  <!-- ... 其他代码 ... -->
  <el-card class="chart-box xc-el-card" shadow="never">
    <div class="chart-title">预警数量趋势</div>
    <ECharts ref="operatorData"></ECharts>
  </el-card>
  <!-- ... 其他代码 ... -->
</template>

<script setup>
import ECharts from "@/web/views/components/echarts/index.vue";
// ... 其他代码 ...
</script>

 

2. 配置图表选项

在 chartOptions.js 中定义不同图表的配置选项:

import { useGlobal } from "@/web/global";
const { $getAutoSize } = useGlobal();

// 预警数量趋势图表配置
export const getOperatorOptions = (data) => {
  // 数据处理和配置生成逻辑
  return {
    // 具体配置项
  };
};

// 场景预警数量统计图表配置
export const getDeviceWarningOptions = (dataList) => {
  const dateData = dataList.map((item) => item.sceneName);
  let seriesDataDemo = dataList.map((item) => item.resultCount);

  return {
    grid: {
      left: "0",
      right: $getAutoSize(10),
      bottom: $getAutoSize(12),
      containLabel: true
    },
    // 其他配置项
  };
};

// 数量趋势图表配置
export const getAccountOptions = (dataList) => {
  // 数据处理和配置生成逻辑
  return {
    // 具体配置项
  };
};

3. 获取数据并更新图表

在 index.vue 中,通过接口获取数据,调用 initChart 方法更新图表:

<script setup>
// ... 其他代码 ...
import { getOperatorOptions, getAccountOptions, getDeviceWarningOptions } from "./chartOptions";

// 预警数量趋势 数据
let operatorData = ref(null);
// 场景预警数量统计 数据
let deviceWarningData = ref(null);
// 数量趋势 数据
let account = ref(null);

onMounted(() => {
  // 预警数量趋势 数据
  getOperatorData();
  // 场景预警数量统计 数据
  getDeviceWarningData();
  // 数量趋势 数据
  getAccountData();
});

// 获取预警数量趋势数据
const getOperatorData = () => {
  http.get("/project/ai/statistics/alert-trend").then((res) => {
    operatorData.value.initChart(getOperatorOptions(res.data));
  });
};

// 新增获取场景预警数量统计数据的函数
const getDeviceWarningData = () => {
  http.get("project/ai/statistics/scene-alert-count").then((res) => {
    deviceWarningData.value.initChart(getDeviceWarningOptions(res.data));
  });
};

// 新增获取数量趋势数据的函数
const getAccountData = () => {
  http.get("project/ai/statistics/trend-month-count").then((res) => {
    account.value.initChart(getAccountOptions(res.data));
  });
};
// ... 其他代码 ...
</script>

通过以上步骤,我们完成了 ECharts 组件的封装和使用。封装后的组件具有以下优点:

  • 复用性高:可以在多个页面中重复使用该组件,只需传入不同的配置项。
  • 可维护性强:图表的初始化和更新逻辑集中在组件内部,便于管理和修改。
  • 灵活性好:通过 props 接收配置项,能够根据不同的需求生成各种类型的图表。

在学习与使用上的建议

在使用上,有很多模板供我们借鉴。直接照抄即可。某当奉上参照链接:

可视化社区

该网站具备大量的图表样式及其源码,找到自己觉得差不多样式的,直接复制,然后基于这个配置项进行改动。

范例:

直接全选复制上方的代码

然后在 js中找到需要改动的相应方法,全部粘贴在方法中。最后将原文中的"option = {"改为"return {"直接return出来即可。示范如下:

import { useGlobal } from "@/web/global";
const { $getAutoSize } = useGlobal();

// 预警数量趋势图表配置
export const getOperatorOptions = (data) => {
  // 数据处理和配置生成逻辑
  return {
    // 具体配置项
  };
};

// 场景预警数量统计图表配置
export const getDeviceWarningOptions = (dataList) => {
var labelData = [];
var labelData1 = [];
for (var i = 0; i < 150; ++i) {
    labelData.push({
        value: 1,
        name: i,
        itemStyle: {
            normal: {
                color: 'rgba(0,209,228,0)',
            }
        }
    });
}
for (var i = 0; i < labelData.length; ++i) {
    if (labelData[i].name < 50) {
        labelData[i].itemStyle = {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                            offset: 0,
                            color: '#6dfbff'
                        },
                        {
                            offset: 1,
                            color: '#02aeff'
                        }
                    ]
                )
            },

        }
    }
}
for (var i = 0; i < 150; ++i) {
    labelData1.push({
        value: 1,
        name: i,
        itemStyle: {
            normal: {
                color: 'rgba(0,209,228,0)',
            }
        }
    });
}
for (var i = 0; i < labelData1.length; ++i) {
    if (labelData1[i].name < 150) {
        labelData1[i].itemStyle = {
            normal: {
                color: '#464451',
            },

        }
    }
}

function Pie() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 10 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 30,
                itemStyle: {
                    normal: {
                        color: "rgba(0,255,255,1)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)",
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 100,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}

function Pie1() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 5 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgba(0,255,255,1)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 100,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}

function Pie2() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 5 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: "rgba(0,255,255,.3)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 100,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}

function Pie3() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 10 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 30,
                itemStyle: {
                    normal: {
                        color: "rgba(0,255,255,.5)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 100,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}
return {
    backgroundColor: '#1f1e26',
    title: [{
        text: '75%',
        x: '50%',
        y: '37%',
        textAlign: 'center',
        textStyle: {
            fontSize: '70',
            fontWeight: '100',
            color: '#79ffff',
            textAlign: 'center',
        },
    }, {
        text: 'DESIGN ELEMENTS',
        left: '50%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
            fontSize: '18',
            fontWeight: '400',
            color: '#5c5a68',
            textAlign: 'center',
        },
    }, {
        text: 'DONUT CHART',
        left: '50%',
        top: '57%',
        textAlign: 'center',
        textStyle: {
            fontSize: '14',
            fontWeight: '400',
            color: '#484556',
            textAlign: 'center',
        },
    }, ],
    polar: {
        radius: ['51%', '47%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
        startAngle: 0,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
    series: [{
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
                color: '#464451',
            },
            data: [75],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#0ff'
                    }, {
                        offset: 1,
                        color: '#02aeff'
                    }]),
                }
            }
        },
        {
            hoverAnimation: false,
            type: 'pie',
            z: 2,
            data: labelData,
            radius: ['52%', '59%'],
            zlevel: -2,
            itemStyle: {
                normal: {
                    borderColor: '#1f1e26',
                    borderWidth: 4,
                }
            },
            label: {
                normal: {
                    position: 'inside',
                    show: false,
                }
            },
        },
        {
            hoverAnimation: false,
            type: 'pie',
            z: 1,
            data: labelData1,
            radius: ['52%', '59%'],
            zlevel: -2,
            itemStyle: {
                normal: {
                    borderColor: '#1f1e26',
                    borderWidth: 4,
                }
            },
            label: {
                normal: {
                    position: 'inside',
                    show: false,
                }
            },
        },
        {
            type: 'pie',
            radius: ['42%', '43%'],
            center: ['50%', '50%'],
            data: [{
                    hoverOffset: 1,
                    value: 100,
                    name: '',
                    itemStyle: {
                        color: '#ff6189',
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    hoverAnimation: false,
                },
                {
                    label: {
                        show: false
                    },
                    labelLine: {
                        normal: {
                            smooth: true,
                            lineStyle: {
                                width: 0
                            }
                        }
                    },
                    value: 100 - 75,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#3c3a48',
                    },
                }
            ]
        },

        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            radius: ['67%', '65.5%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie()
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            startAngle: -150,
            radius: ['65%', '63.5%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie3()
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            startAngle: -140,
            radius: ['68%', '66.5%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie()
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            radius: ['61%', '60%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie1()
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            startAngle: -140,
            radius: ['61%', '60%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie2()
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            startAngle: -147.5,
            radius: ['61%', '60%'],
            z: 1,
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie2()
        },

    ]
};
};

// 数量趋势图表配置
export const getAccountOptions = (dataList) => {
  // 数据处理和配置生成逻辑
  return {
    // 具体配置项
  };
};

之后只需要简单改动js文件中的配置项就可以改动图表的各种样式。 

希望本文的分享能帮助你更好地在 Vue3 项目中使用 ECharts 进行数据可视化开发。

 


网站公告

今日签到

点亮在社区的每一天
去签到