vue引入echarts
<template>
<div class="hello">
<div class="main" ref="main"></div>
</div>
</template>
<script>
import eCharts from 'echarts'
export default {
name: 'HelloWorld',
eCharts, // 让vue组件使用
mounted() {
let that = this;
// 基于准备好的dom,初始化echarts实例
let myChart = eCharts.init(that.$refs.main)
// 指定图表的配置项和数据
let option = {
// 设置标题
title: {
text: '这里是数据'
},
// 工具
toolbox: {
// 是否显示
show: true,
feature: {
// 保存图像
saveAsImage: {
show: true
}
}
},
// 图例
legend: {
data: ['销量']
},
// x轴上显示的信息
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y轴上显示的信息 y轴没有设置数据时会跟据下面的数据来生成y轴
yAxis: {
type: 'value'
},
// 数据
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar' // 指定显示方式 （柱状图）
}]
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
width: 900px;
height: 600px;
border: 1px solid red;
}
</style>
多个图图状显示
// 图例
legend: {
data: ['销量','产量']
},
// 数据
series: [{
name: '销量',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
},{
name: '产量',
data: [100, 300, 800, 900, 1100, 1300, 1400],
type: 'line'
}]
这里是数据.png
