你可以通过以下几种方式获取 ECharts。
-
从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。
-
在 ECharts 的 GitHub 上下载最新的
release
版本,解压出来的文件夹里的dist
目录里可以找到最新版本的 echarts 库。 -
通过 npm 获取 echarts,
npm install echarts --save
,详见“在 webpack 中使用 echarts”
引入echarts的几种情况
- 在html中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.在vue中引入
2.1 npm install echarts --save
2.2 在main.js中引入
import echarts from 'echarts'//在vue中引入echarts
Vue.prototype.$echarts = echarts //全局引用
3.用法
3.1在HTML中的用法
//1.定义一个具有宽高的容器
<div id="main" style="width:200px;height:200px"> </div>
<script>
2.// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
3.// 绘制图表
myChart.setOption({
title: {//标题
text: 'ECharts 入门示例'
},
tooltip: {},//提示信息
xAxis: {//x座标
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},//y座标
series: [{//数据
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
</script>
3.2在vue中的使用
在methods生命周期里面定义一个函数
kk(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('chart1'));
// 绘制图表
let option = {
title:{},//标题
xAxis: {//x座标
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {},//y座标
series: [//数据
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}
myChart.setOption(option);
}
4.具体的参数可以参考
https://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts
5.一些案例可以参考
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all