echarts 入门(迈过小坑)
引入方式:
-
从 Apache ECharts
官网下载界面 获取官方源码包后构建。 -
在 ECharts 的 GitHub 获取。
-
通过 npm 获取 echarts
shell npm install echarts --save
在js中引入 echarts
import * as echarts from 'echarts'
如果系统提示没有安装,则点击安装
// heml
<div id="main" style="width:600px;height:400px;"></div>
// js
mounted () {
this.echartsbox()
},
echartsbox () {
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
const option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
// 绘制图表
myChart.setOption(option)
}