1 引入
官网:https://echarts.apache.org/zh/index.html
可以直接下载,也可以使用npm下载
下载js文件之后引入
2 使用
<body>
<!-- 准备一个容器div放置图表,会按照容器的大小绘图 -->
<div id="demo1" style="width: 600px;height:400px;"></div>
<!-- 使用javascript绘制图表 -->
<script>
// 初始化绘制图表的echarts实例,传入图表容器
var myChart = echarts.init(document.querySelector('#demo1'))
// 指定图表的配置,用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等
var option = {
title: { text: '第一个echarts demo1' },
tooltip: {}, // 提示框,
legend: {
data: ['人数']
},
// 直角坐标系 X 轴
xAxis: {
data: ['vue', 'react', 'angular', 'jquery']
},
// y轴,如果是一个空对象会默认显示数字
yAxis: {},
series: [
{
name: "人数",
type: 'bar',
data: [2000, 1500, 500, 2200]
}
]
}
// 对实例对象设置配置
myChart.setOption(option)
</script>
</body>
效果图
- vue中使用
<script>
import * as echarts from 'echarts'
export default {
name: 'App',
mounted() {
// 初始化绘制图表的echarts实例,传入图表容器
var myChart = echarts.init(document.querySelector('#demo2'))
// 指定图表的配置,用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等
var option = {
title: { text: '第一个echarts demo2' },
tooltip: {}, // 提示框,
legend: {
data: ['人数']
},
// 直角坐标系 X 轴
xAxis: {
data: ['vue', 'react', 'angular', 'jquery']
},
// y轴,如果是一个空对象会默认显示数字
yAxis: {},
series: [
{
name: "人数",
type: 'bar',
data: [2000, 1500, 500, 2200]
}
]
}
// 对实例对象设置配置
myChart.setOption(option)
}
}
</script>
效果如上图