[echart官网](https://www.echartsjs.com/zh/index.html
下载本地包,或者通过cmpn/npm cdn下载也可以
第一步 :引入echarts.min.js
注意使用的时候,引入的文件要在你写方法之前,不然就会包echart is undefined 这个错误
<script src="js/echart/echarts.min.js"></script>
第二步 :在html里面
<div id="chartmain" style="width:500px; height: 400px; "></div>
第三步 :写方法
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//指定图标的配置和数据
var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['健康老人', '失能老人', '半失能老人', '失独老人']
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 335,
name: '健康老人',
itemStyle:{color:"#6c95fb"}
},
{
value: 310,
name: '失能老人',
itemStyle:{color:"#1dddb9"}
},
{
value: 234,
name: '半失能老人',
itemStyle:{color:"#f287b2"}
},
{
value: 135,
name: '失独老人',
itemStyle:{color:"#f78f1a"}
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
目前是可以显示出来的