一、npm安装echarts
npm install echarts --save
二、在需要的vue页面引入
import echarts from 'echarts'
三、给div一个id
<div id="areaBox" style="width: 60%;height: 60vh"> </div>
四、data里面定义
data(){
return{
// 指定图表的配置项和数据
areaBox : {
tooltip: { //设置tip提示
trigger: 'axis'
},
legend: { //设置区分(哪条线属于什么)
data:['面积(亩)']
},
color: ['#00ff00'], //设置区分(每条线是什么颜色,和 legend 一一对应)
xAxis: { //设置x轴
type: 'category',
boundaryGap: false, //坐标轴两边不留白
data: ['高先甸', '毕武庄', '横古', '曹庄子', '将军庄', '高家围', '石桥沽',],
name: '村庄名称', //X轴 name
nameTextStyle: { //坐标轴名称的文字样式
color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 0, 20]
},
axisLine: { //坐标轴轴线相关设置。
lineStyle: {
// color: '#FA6F53',
}
}
},
yAxis: {
name: '',
nameTextStyle: {
color: '#FA6F53',
fontSize: 16,
padding: [0, 0, 10, 0]
},
axisLine: {
lineStyle: {
// color: '#FA6F53',
}
},
type: 'value'
},
series: [
{
name: '面积(亩)',
data: [220, 232, 201, 234, 290, 230, 220],
type: 'line', // 类型为折线图
lineStyle: { // 线条样式 => 必须使用normal属性
normal: {
color: '#00ff00',
}
},
},
]
},
五、methods里面定义方法
getEcharts(){
this.chartLineAreaBox = echarts.init(document.getElementById('areaBox'))
// 使用刚指定的配置项和数据显示图表。
this.chartLineAreaBox.setOption(this.areaBox)
}
六、mounted里面调用
this.getEcharts()