echarts基础应用

来源：互联网发布：埃摩森猎头公司知乎编辑：程序博客网时间：2024/06/06 13:20
第一步：下载相应的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