Vue -- echarts 折线图demo

<template>
<div>
<div id="myChart2" class="myChart"></div>
</div>
</template>
<script>

export default {
data(){
return{
name:["衬衫","羊毛衫","雪纺衫","风衣","毛衣","半袖"],
num:[5, 20, 36, 10, 18, 32]
}
},
mounted(){
var json = require(‘../../data.json‘)
console.log(json)
console.log(json[2].name)
this.echart()
},
methods:{
echart(){
let myChart = this.$echarts.init(document.getElementById(‘myChart2‘))
myChart.setOption({
color:[‘#3081f3‘],
title: { x:‘center‘,text: ‘异步加载数据‘ },
xAxis: {
data:this.name
},
yAxis: {},
series: [{
type: ‘bar‘,
data:this.num,
itemStyle:{
normal:{
label:{
show:true,
position: ‘top‘
}
}
}
},{
type: ‘line‘,
color:‘#a4b5f2‘,
smooth: false, // 折线图平滑曲线
data:this.num
}
],
tooltip: {},
})

},
}
}
</script>
<style scoped>
.myChart{
width: 600px;
height: 300px;
margin-top: 20px;
}
</style>

Vue -- echarts 折线图demo

原文：https://www.cnblogs.com/q0024/p/14115549.html