echarts的简单运用

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

<meta charset="utf-8">

<title>ECharts</title>

<!-- 引入 echarts.js -->

<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->

<script src="echarts.min.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

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

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

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

<meta charset="utf-8">

<title>ECharts</title>


<!-- 引入 echarts.js -->

<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->

<script src="js/echarts.min.js"></script>