vue项目引入echarts并且创建一个既有折线又有条形图的echarts
时间: 2023-08-11 08:09:29 浏览: 101
要在 Vue 项目中引入 Echarts,需要先安装 Echarts:
```bash
npm install echarts --save
```
然后在需要使用 Echarts 的组件中,引入 Echarts:
```javascript
import echarts from 'echarts'
```
接下来,可以在组件的 mounted 钩子中创建一个 Echarts 实例,然后配置和渲染图表。下面是一个同时包含折线和条形图的示例:
```vue
<template>
<div ref="chart" style="width:100%;height:400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
// 创建 Echarts 实例
const chart = echarts.init(this.$refs.chart);
// 配置项
const option = {
title: {
text: '折线图和条形图'
},
tooltip: {},
legend: {
data:['销量', '利润']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: [
{
type: 'value',
name: '销量',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} 件'
}
},
{
type: 'value',
name: '利润',
min: 0,
max: 10000,
interval: 2000,
axisLabel: {
formatter: '{value} 元'
}
}
],
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
type: 'line',
yAxisIndex: 1,
data: [1000, 2000, 3000, 4000, 5000, 6000]
}
]
};
// 渲染图表
chart.setOption(option);
}
}
</script>
```
在上面的示例中,首先在模板中创建一个 div 元素作为 Echarts 的容器,然后在 mounted 钩子中创建 Echarts 实例,并将其挂载到容器上。接着定义了一个包含折线和条形图的图表配置项,最后通过 chart.setOption() 方法将配置项渲染到图表中。
阅读全文