第一步，安装echarts包
npm install echarts --save
第二步，vue页面直接引用
<template>
<div ref="container" class="content"></div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
export default {
name: "lineChart",
data(){
return{
}
},
methods:{
// 初始化echart
initChart () {
var myChart = echarts.init(this.$refs.container);
myChart.setOption({
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'总共',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
});
}
},
mounted () {
this.$nextTick(() => {
this.initChart();
})
}
}
</script>
<style scoped>
.content{
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
height: 500px;
width: 500px;
}
</style>
