最近项目中要做微博运营统计，要求使用echarts实现，图形报表有很多中实现之前也接触过,需要柱状图跟折线图的双向实现。

echarts官网提供了源码和说明文档，使用echarts需要先到官网下载需要的js源文件。

官网上的demo中夹杂着很多我们用不到的东西，想使用饼状图就得从demo中把不用的去掉，劈植斩叶留下最原始的功能实现。这样毕竟比较费时，我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示：

echarts饼状图实现步骤：

1，在简单的html中引入js文件

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
</body>

2，为图形准备容器

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
   
    <div id="picturePlace"></div>
 
</body>

就是在html中添加一个div给定id，图表就会显示在div中。

3，模块导入js

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
    </script>
</body>

4，添加显示数据

<head>
    <meta charset="utf-8">
    <title>Charts demo</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <div id="picturePlace"></div>
     <script type="text/javascript">
        // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });

     // 使用
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>)); 
            
            option = {
            	    title : {
            	        text: '某站点用户访问来源',
            	        subtext: '纯属虚构',
            	        x:'center'
            	    },
            	    tooltip : {
            	        trigger: 'item',
            	        formatter: "{a} <br/>{b} : {c} ({d}%)"
            	    },
            	    legend: {
            	        orient : 'vertical',
            	        x : 'left',
            	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            	    },
            	    toolbox: {
            	        show : true,
            	        feature : {
            	            mark : {show: true},
            	            dataView : {show: true, readOnly: false},
            	            restore : {show: true},
            	            saveAsImage : {show: true}
            	        }
            	    },
            	    calculable : true,
            	    series : [
            	        {
            	            name:'访问来源',
            	            type:'pie',
            	            radius : '55%',
            	            center: ['50%', '60%'],
            	            data:[
            	                {value:335, name:'直接访问'},
            	                {value:310, name:'邮件营销'},
            	                {value:234, name:'联盟广告'},
            	                {value:135, name:'视频广告'},
            	                {value:1548, name:'搜索引擎'}
            	            ]
            	        }
            	    ]
            	};
    
            // 为echarts对象加载数据 
            myChart.setOption(option); 
        }
    );
</script>

``` ```

5，运行程序显示结果
在这里插入图片描述

以上是饼状图的实现步骤，柱状图散点图跟这个类似就是引用js时饼状图是pie，柱状图是bar，对应的option里面的数据不同，程序的架子是一样的。。

总结： **

echarts官网案例也很全面，不过项目中用到的不一定特别全，所以我们要熟悉他的每一个文档和属性，熟悉整个结构以及架构，那么的话我们可以根据他的属性来修改细节达到我们想要的结果，学习并不难，而是学习的过程你应该记录下来，细节决定一个人的成败。

例子：在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_52703987/article/details/115632844