2025年echarts vue 柱状图实例_如何在vue框架项目中使用echarts并制作柱状图

科技前沿 • 2025-03-11 13:33 • 阅读 35

大家好，我是讯享网，很高兴认识大家。

1、在电脑指定文件夹下，鼠标右键选择Git Bash Here，然后输入命令

cnpm install --global vue-cli 安装vue-cli

讯享网cnpm install --global vue-cli

2、接着使用命令：vue init webpack wanm，创建一个基于webpack模板的新项目

vue init webpack wanm

3、切换工作目录cd wanm/，然后运行项目：npm run dev

运行项目：npm run dev

4、如果要在vue框架项目中使用echarts，需要安装echarts

npm install echarts -S

5、打开HBuilderX开发工具，导入项目wanm

导入项目wanm

6、在src/components文件路径下，新建vue文件ColumnChart.vue

新建vue文件ColumnChart.vue

7、在组件ColumnChart.vue文件中，插入一个div，带有id属性和style

插入图形容器

8、接着在script标签中，导入echarts，然后初始化变量width和height

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

export default {

data() {

return {

width: '1800px',

height: '900px'

}

导入echarts，初始化变量width和height

9、初始化图形，绑定图形数据源和相关属性

初始化图形，绑定图形数据源和属性

10、打开项目中的index.js文件，导入组件ColumnChart，并配置路由

导入组件ColumnChart，并配置路由

11、保存代码并使用命令运行项目，结果出现报错；检查代码发现，没有导入vue

导入vue模块

12、修改代码后，刷新浏览器，可以查看到一个柱状图

打开浏览器，预览柱状图效果