echarts创作过程

最新推荐文章于 2024-05-16 13:36:36 发布

李克鹏

最新推荐文章于 2024-05-16 13:36:36 发布

阅读量236

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45738390/article/details/124513720

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、引入js

2、初始化图表

<div id="chart"></div>
<script>
    var chart = echarts.init(document.getElementById('chart'),
        'macarons',                  // 设置主题
        {width:800,                  // 设置宽高
        height:400,
        render:'svg'},               // 设置图片类型  svg矢量图  canvas多次加载时使用
    )

    chart.setOption({
        title:,
        xAxis:,
        yAxis:,
        toolbox:,
        series:[{
        
        }],
    })
</script>

3、图表类型及需要设置的参数见

Documentation - Apache ECharts

4、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="echarts/echarts.js"> </script>
    <script src="macarons.js"></script>
    <title>Title</title>
    <style>
        #chart{
            width: 100%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'),
            'macarons',
            {width:800,
            height:400,
            render:'svg'},
        )

        chart.setOption({
            title:{
                text:'近10年来济南民航客运量变化',
                textStyle:{
                    color:'#f7906d'
                },
                left:'200px'
            },
            xAxis:{data:['2010','2011','2012','2013','2014','2015','2016','2017','2018','2019'],
                name:'年份',
                nameTextStyle:{
                    color:'rgb(0,0,0)'
                },
            },
            yAxis:{
                min:0,
                // max:400000,
                type:'value',
                name:'万人',
                nameTextStyle:{
                    color:'rgb(0,0,0)'
                },
            },
            toolbox:{
                feature:{
                    restore:{},
                    saveAsImage:{
                        type:'jgp'
                    }
                }
            },
            series:[
                {
                data:[379.2,433.0,426.0,452.8,488.1,533.1,645.1,785.6,894.1,936.1],      //济南民航
                    type:'bar',
                    showBackground:false,
                    itemStyle:{
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          { offset: 0, color: '#6a3387' },
                          { offset: 0.5, color: '#cfb3d7' },
                          { offset: 1, color: '#ead8e3' }])
                    },
                    emphasis:{
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ead8e3' },
                            { offset: 0.7, color: '#cfb3d7' },
                            { offset: 1, color: '#6a3387' }])
                        }
                    }
                }]
            })
    </script>
</body>
</html>

李克鹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts创作过程

1、引入js2、初始化图表<div id="chart"></div><script> var chart = echarts.init(document.getElementById('chart'), 'macarons', // 设置主题 {width:800, // 设置宽高 height:400, render:
复制链接

扫一扫

专栏目录