官网中描述很详细 https://echarts.apache.org/handbook/zh/basics/import
个人再记录整理一下~
下包
npm i echarts -S
在 main.js 中引入
import * as echarts from 'echarts';
注意: 【 * as 】务必要加 否则会出现报错
Cannot read property "init" of undefined
在 Home.vue 或组件中初始化
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
顺利的话会看见一个柱状图
此示例中给定了容器的宽高 如果想拥有一个响应式的图表 可以监听页面的 window.onresize 事件获取浏览器大小改变的事件 然后调用 echartsInstance.resize 改变图表的大小
<style>
#main,
html,
body {
width: 100%;
}
#main {
height: 400px;
}
</style>
<div id="main"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
window.onresize = function() {
myChart.resize();
};
</script>