echarts的入门使用

0.步骤

1.引入ECharts文件
2.为ECharts准备一个具备大小的DOM
3.基于准备好的dom,初始化ECharts实例
4.制定图标的配置项和数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--2.为ECharts准备一个具备大小的DOM-->
<div id="main" style="width: 600px;height: 400px; border: 1px solid #000;"></div>
<!--1.引入ECharts文件-->
<script src="echarts.min.js"></script>
<script>
//    可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
//    3.基于准备好的dom,初始化ECharts实例
    var myChart = echarts.init(document.getElementById("main"));
    //4.制定图标的配置项和数据
    var option = {
        title: {
            text: 'ECharts \n入门示例',//主标题文本 支持\n换行
            subtext: 12,
            show: true,//标题是否显示 默认为true
            x: 'left',//标题的位置 默认是left
        },
        tooltip: {},//鼠标放上面出现悬浮
        legend: {//图标
            data:['销量1']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]//x轴中的数据
        },
        yAxis: {},//在使用echarts.js的柱状图的时候一定要配置xAxis,yAxis,series这三个参数，如果是不想设置的话也要初始化可以将其设置为空JSON就可以了，要不然会出项报错，同时要保证在echarts.init之前的对象是有宽高的，要不然也会出现错误
        //name=legend.data的时候才能显示图例(销量)
        series: [{//echarts中必不可少的部分:用于指定图标的类型(饼图,柱状图)之类
            name: '销量1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
// 5.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

参考echartsapi文档 http://echarts.baidu.com/option.html#title

0.步骤

猜你喜欢