Echarts图表的简单实现

最新推荐文章于 2022-03-28 21:48:51 发布

mischen520

最新推荐文章于 2022-03-28 21:48:51 发布

阅读量495

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/miachen520/article/details/52107984

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Echarts图表的简单实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script type="text/javascript">
    //根据给定的dom文档  生成echarts对象
    var charts  = echarts.init(document.getElementById("main"));
    /*
     *
     * @type {{title: {text: string}, tooltip: {}, legend: {data: string[]}, xAxis: {data: string[]}, yAxis: {}, series: *[]}}
     */
    var option = {
        title: {
            text: 'ECharts'  //标题
        },
        tooltip: {},
        legend: {
            data:['销量123','销量']  //显示的项目   要和给定的series里面的显示对象的名称相同
        },
        xAxis: {
            data: ["衬衫1","羊毛衫2","雪纺衫","裤子","高跟鞋","袜子"] //表示x轴设置
        },
        yAxis: {},
        series: [{
            name: '销量123',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '销量',
            type: 'pie',
            data: [10, 19, 33, 8, 2, 24]
        }]
    };
    charts.setOption(option);

</script>
</html>

mischen520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts图表的简单实现

Echarts图表的简单实现 //根据给定的dom文档生成echarts对象 var charts = echarts.init(document.getElementById("main")); /* * * @type {{title: {text: string}, toolti
复制链接

扫一扫