EChars入门

准备工作:1,下载eChars.js 导入到项目(并在在webContent目录下,新建Js文件夹并将eChars.js包导入 )

-------------------------------------------具体代码演示------------------柱状图效果----------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts入门</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的DOM容器-->
    <div id='main' style='width:600px;height:400px;'></div>
   <!-- 引入ECharts文件 -->
    <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script>
          //基于准备好的DOM,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
          //指定图表的配置项和数据
        var option = {
            title:{
                text:'EChars入门'
            },
            //提示框组件
            tooltip:{
                //坐标轴触发,主要用于柱状图,折线图等
                trigger:'axis'
            },
            //图例
            legend:{
                data:['销量']
            },
            //横轴
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            //纵轴
            yAxis:{},
            //系列列表。每个系列通过type决定自己的图表类型
            series:[{
                name:'销量',
                //折线图 @图表的类型bar ,pie
                type:'bar',
                data:[5, 20, 36, 10, 10, 20]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
    sdafsadfsda
</body>
</html>

猜你喜欢

转载自blog.csdn.net/chai1230/article/details/81660469
今日推荐