用vue echarts写一个表,复合条形图和折线图
时间: 2024-02-21 21:57:45 浏览: 70
好的,我可以提供一个简单的示例代码,你可以参考它实现你的需求。
首先,你需要安装 ECharts 和 Vue:
```
npm install echarts --save
npm install vue-echarts --save
```
然后在你的 Vue 组件中引入:
```vue
<template>
<div>
<v-chart :options="chartOptions" />
</div>
</template>
<script>
import VueECharts from 'vue-echarts';
export default {
components: {
'v-chart': VueECharts,
},
data() {
return {
chartOptions: {
title: {
text: '复合条形图和折线图',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
xAxis: [
{
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '邮件营销',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} 万'
}
},
{
type: 'value',
name: '联盟广告',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name:'邮件营销',
type:'bar',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
yAxisIndex: 1,
data:[10, 12, 9, 14, 8, 20, 18]
},
{
name:'视频广告',
type:'bar',
data:[30, 42, 21, 54, 30, 70, 60]
},
{
name:'直接访问',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'bar',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
},
};
},
};
</script>
```
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。其中,`chartOptions` 对象包含了图表的配置选项,具体的配置可以参考 ECharts 的官方文档。
阅读全文