vue2使用echarts图表

### 如何在 Vue 2 中使用 ECharts 创建图表 #### 安装依赖库 为了能够在 Vue 2 项目中集成并使用 ECharts 图表，需要先安装 `echarts` 库。可以通过 npm 或者 yarn 来完成这一操作。 ```bash npm install echarts --save ``` 或者 ```bash yarn add echarts ``` #### 引入 ECharts 到项目中 可以在项目的入口文件 main.js 中全局引入 ECharts： ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; // 引入 echarts 并挂载到 Vue 的原型上以便于在整个应用范围内访问[^4] import echarts from 'echarts' Vue.prototype.$echarts = echarts; new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 创建用于显示图表的组件 接下来，在单文件组件里定义一个 div 元素作为容器来承载图表，并初始化该图表对象。 ```html <!-- ChartComponent.vue --> <template> <div class="chart-container"> <!-- 创建 DOM 节点供 ECharts 使用 [^2]--> <div ref="myChart" style="width: 600px;height:400px;"></div> </div> </template> <script> export default { name: "ChartComponent", mounted() { this.initChart(); }, methods: { initChart() { const myChart = this.$echarts.init(this.$refs.myChart); // 设置配置项和数据源 let option = { title: { text: 'ECharts 示例', }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 渲染图表 myChart.setOption(option); } } }; </script> <style scoped> .chart-container { margin-top: 20px; } </style> ``` #### 将自定义图表组件加入页面布局 最后一步是在父级组件（如 App.vue）或者其他任何地方注册并使用刚刚创建好的图表组件。 ```html <!-- App.vue --> <template> <div id="app"> <h1>欢迎来到我的网站</h1> <!-- 使用刚才创建的图表组件 --> <ChartComponent /> </div> </template> <script> import ChartComponent from './components/ChartComponent.vue' export default { components: { ChartComponent, } } </script> ``` 这样就完成了在一个基于 Vue 2 构建的应用程序中添加 ECharts 图表的过程[^1]。