echarts的简单运用

红太狼 2022-04-08 15:13 284阅读 0赞

工具:webstorm  
我就简单的分为三步来给你们说吧！！  
记住三步！记住三步！记住三步！记住三步！记住三步！记住三步！  
第一步：  
新建一个html文件  
前提是在官网自己下载文件包，下载的文件名字会是echarts.js ，记住把名字改为echarts.min.js!!!  
我这里取名为echartstest.html,然后将下面的内容贴上(我这里直接拽官方文档来了，例子一样。)  
直接复制下列代码就行了

<div id="main" style="width: 1000px;height:600px;"></div>
    
    <script type="text/javascript">
    
        // 基于准备好的dom，初始化echarts实例
    
        var myChart = echarts.init(document.getElementById('main'));

第二步：  
var option=\{其中的代码呢看你自己的需求在官网上自己找例子，复制其中的代码就ok\}  
以下是我的随便找的例子：  
var option=\{

backgroundColor: '#2c343c',
    
            textStyle: {
    
                        color: 'rgba(255, 255, 255, 0.3)'
    
                    },
    
            series : [
    
                {
    
                    name: '访问来源',
    
                    type: 'pie',
    
                    radius: '55%',
    
                    data:[
    
                        {value:400, name:'搜索引擎'},
    
                        {value:335, name:'直接访问'},
    
                        {value:310, name:'邮件营销'},
    
                        {value:274, name:'联盟广告'},
    
                        {value:235, name:'视频广告'}
    
                    ],
    
                    roseType: 'angle',
    
    
    
                    itemStyle: {
    
                        emphasis: {
    
                            shadowBlur: 200,
    
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
    
                        }
    
                    },
    
                    label: {
    
                        normal: {
    
                            textStyle: {
    
                                color: 'rgba(255, 255, 255, 0.3)'
    
                            }
    
                        }
    
                    },
    
                    labelLine: {
    
                        normal: {
    
                            lineStyle: {
    
                                color: 'rgba(255, 255, 255, 0.3)'
    
                            }
    
                        }
    
                    }
    
    
    
                }
    
            ]
    
        }

第三步：  
以下这个是必须写的哦！！！！！  
// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);
    
    
    
    </script>

好啦，最后的奥秘自己去体会哟！

还是来个总的代码啦（怕有些人看不懂！！）