Echarts-的基本使用

jiezi
5 年前
关于 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>