正文
vue中添加echarts
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
方法一：全局引入echarts
步骤：
1、全局安装 echarts依赖。 cnpm install echarts -- save
2、引入echarts模块，在Vue项目的main.js中引入echarts模块，即是写入如下代码：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、在需要的组件，如index.vue中
<template>
<div class="echart-box" id="E_zkcl" style="width: 380px;
height:330px"></div>
</template>
<script>
export default {
data(){
return(){
}
},
methods: {
drawLine(){
let myChart1 = this.$echarts.init(document.getElementById('E_zkcl')) }
myChart1.setOption({
color:['#4ED8DA'],
title : {
text: '每月检修统计',
x:,
y:,
textStyle:{
fontSize: ,
fontWeight: 'bolder',
color: '#333'
}
},
tooltip : {
trigger: 'axis'
},
grid:{
borderWidth:,
x:'10%',
y:'20%',
x2:'5%',
y2:'15%',
},
calculable : true,
xAxis : [
{
type : 'category',
axisLine:{
show:false,
},
splitLine:{
show:false, //不显示分割线
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis : [
{
type : 'value',
axisLine:{
show:false,
}
}
],
series : [
{
name:'数量',
type:'bar',
data:[, , , , , , , , , , , ],
}
]
});
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
myChart.resize();
//myChart1.resize(); //若有多个图表变动，可多写
}
},
mounted(){
this.drawLine();
}
}
</script>
方法二：按需引入
