在项目中使用echarts
在项目中使用echarts的方法有很多,主要有:
-
下载 echarts.min.js 并用 script 标签引入
//如果是开发环境可以使用源码版本 echarts.js,源码版本包含了常见的错误提示和警告 <script src="echarts4.5\echarts.min.js"></script>
-
使用 CDN 方法
//使用百度cdn,部署环境不推荐使用cdn的方式,因为需要联网而且不稳定 <script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
-
使用cnpm安装
//需要准备好ndoe,npm环境,使用时直接在项目代码中使用 require('echarts') 来使用,需要ES6支持 $ cnpm install echarts --save
hello_echarts
本文以上述第一种方式为例介绍echarts如何使用
直接贴代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 初始化echarts图表的初始div大小,必须设置,否者会出现空白页面 -->
<style>
#echart {
width: 400px;
height: 400px;
background-color: chartreuse;
}
</style>
<!-- 引入echarts -->
<script src="echarts4.5\echarts.min.js"></script>
</head>
<body>
<div id="echart">
</div>
</body>
<script>
//echarts图表div的dom节点
let dom = document.getElementById("echart");
//初始化dom节点
let myChart = echarts.init(dom);
//官网实例
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}]
};
//渲染图表
myChart.setOption(option, true);
</script>
</html>