echarts基础应用

最新推荐文章于 2024-04-15 09:14:10 发布

祥灬子

最新推荐文章于 2024-04-15 09:14:10 发布

阅读量337

点赞数

分类专栏： echarts3-0 js 文章标签： echarts js 前端框架

本文链接：https://blog.csdn.net/qq_17505335/article/details/78877297

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

echarts3-0

1 篇文章 0 订阅

订阅专栏

第一步：下载相应的js文件：echarts.min.js和macarons.js，其中macarons.js文件时主题文件。
第二步：编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id = "d1" style = "margin:20px auto;width:600px;height:400px;"></div>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="macarons.js"></script>
    <script type="text/javascript">
        //其中第二个参数是动态设置主题
        var myChart = echarts.init(document.getElementById("d1"),'macarons');//初始化画布
        var option = {
            title:{
                text:"echarts实例"
            },
             tooltip : {
                trigger: 'axis'
            },  
            legend: {
                data:['新增关注量','取消关注量','净增长量']
            },    
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
             xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],  
             //双y轴
             yAxis : [
                {
                    type : 'value',
                    minInterval: 50,
                    name : '新增关注量',
                    splitNumber: 5, 
                    axisLabel : {
                         formatter: '{value} 人'    //控制输出格式
                    },
                    max: function(value){
                        return value.max+5;
                    }
                },
                {
                    type : 'value',
                     name : '增长量',
                     splitNumber: 10,
                     minInterval: 20,
                     axisLabel : {
                         formatter: '{value} 人'    //控制输出格式
                     },
                     max: function(value){
                        return value.max+5;
                     }
                }
            ],
            series : [
                {
                    name:'新增关注量',
                    type:'bar',
                    itemStyle:{
                        normal:{
                            barBorderRadius:5
                        },
                        emphasis: {
                             barBorderRadius: 5
                        }
                    },
                    data:[-20, 149, 70, 23, 25, 76, -13, 116, 32, 20, 64, 33],
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                 {
                    name:'取消关注量',
                    type:'bar',
                    itemStyle:{
                        normal:{
                            barBorderRadius:5
                        },
                        emphasis: {
                             barBorderRadius: 5
                        }
                    },
                    data:[26, 59, 90, 64, 128, 70, 17, 12, 48, 118, 60, 23],
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                },
                {
                    name:'净增长量',
                    yAxisIndex: 1,
                    type:'line',
                    data:[-12, -59, 90, 26, 28, 70, 16, 82, 48, 18, 60, 23]
                }
            ]
        }
        myChart.setOption(option);
    </script>
</body>
</html>

第三步：运行效果

祥灬子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts基础应用

第一步：下载相应的js文件：echarts.min.js和macarons.js，其中macarons.js文件时主题文件。第二步：编写index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id
复制链接

扫一扫