如何使用echart

[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>

目前是可以显示出来的

echartimg2.png