安装
npm i echarts -S
main中引入
import echarts from 'echarts'
// 将其继承在vue的原型上
Vue.prototype.$echarts = echarts
vue组件中使用
<template>
<div style="min-width: 100%; min-height: 6.00rem;" id="main" ref="myEchart"></div>
</template>
<script>
export default {
name: "Echarts",
data(){
return{
}
},
mounted(){
var searcher=window.localStorage.getItem("historyItems")
this.SearchList=searcher.split("|")
this.Line()
},
methods:{
Line() {
var myChart = this.$echarts.init(document.getElementById('main'));
// 配置
var option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : this.SearchList
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
],
legend: {
data:['直接访问','搜索引擎'],
}
};
myChart.setOption(option);
}
}
}
</script>
<style scoped>
</style>