1.安装
cnpm i echarts --save
2.全局引用
import * as echarts from 'echarts'//引用echarts
Vue.prototype.$echarts = echarts //注册组件
let myChartDoc = document.getElementById('myChart');
// 基于准备好的dom,初始化echarts实例
that.myChart = that.$echarts.init(myChartDoc)
3.局部引用
按官网操作:
https://echarts.apache.org/handbook/zh/basics/import
4.容器定宽高
<!-- 设置有高度的父容器 -->
<div id="myChart" style="width:800px;height:500px"></div>
5.图表定宽高
let myChartDoc = document.getElementById('myChart');
// 基于准备好的dom,初始化echarts实例
that.myChart = that.$echarts.init(myChartDoc,null,{
width:800,
height:500
});
6.根据窗口自适应宽高
<template>
<!-- 设置有高度的父容器 -->
<div id="myChart" style="width:100%;height:500px"></div>
</template>
<script>
export default {
name:'echartsDemo1',
data(){
return{
msg:'测试ECAHRTS',
myChart:null,
}
},
mounted(){
this.initEchartsData();
},
methods:{
/**
* 初始化 图表
*/
initEchartsData(){
let that = this;
that.$nextTick(function () {
let myChartDoc = document.getElementById('myChart');
// 基于准备好的dom,初始化echarts实例
that.myChart = that.$echarts.init(myChartDoc);
// 绘制图表
let option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
},
{
type: 'bar',
data: [26, 24, 18, 22, 23, 20, 27]
}
]
};
that.myChart.setOption(option,true)
setTimeout( function (){
window.onresize = function () {
that.myChart.resize();
}
},200)
})
},
},
}
</script>