Echarts 的基本使用

关于Echarts的基本使用
最近项目中用到很多数据图，使用的是百度的Echarts插件，在此做一下总结。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var Conceptoptoin = {
            // 配置全局的颜色，包括图例和图表。【从第一个开始向右排】
            color:['#FF9154', '#FDCF4F', '#22DFC3', '#54CDFF', '#3A93F2'],
            // 右侧图例样式配置
            legend: {
                orient: 'vertical', // 布局方式 垂直
                x: '55%',// x轴位置 【如果不配置x，可能会出现文字在图例左侧的现象】
                y: 'center',// y轴位置 【居中】
                itemWidth: 11,// 图例图形宽度
                itemHeight: 11,// 图例图形高度
                textStyle: {// 图例字体样式
                    fontSize: 13,
                    color: 'rgba(23,35,61,0.80)',
                },
                data: ['直接访问','邮件营销','联盟广告']// 图例的数据,要于图表数据对应，不然不显示。
            },
            // 图表
            series: [
                {
                    name:'审计项目',
                    type:'pie',// 饼状图
                    radius: ['60%', '75%'],// 粗细内外圈
                    center: ['25%', '50%'],// 所处位置
                    avoidLabelOverlap: false,
                    label: {// 鼠标移入显示内容
                        normal: {
                            show: false,
                            position: 'center',// 显示在圆的中心
                            formatter: "{t1|{c}个 ({d}%)} \n {b}",// 通过{a|b}可以单独添加样式， \n 换行。
                            rich: {// 配置样式
                                t1: {
                                    color: '#495060',
                                    fontSize: 16,
                                    height: 30
                                }
                            }
                        },
                        // 高亮样式
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '13',
                                color: 'rgba(28,36,56,0.56)'
                            }
                        }
                    },
                    labelLine: { // 鼠标移入显示浮层标签
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'}
                    ]// 数据，简单的value、name
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
Echarts 的基本使用

发小发

引用和评论

Vue项目自适应页面配置

echarts map 黑龙江补全大兴安岭地图地理测绘数据type为MultiPolygon
