19.echarts图表-CSDN博客

本文链接：https://blog.csdn.net/yaochaohx/article/details/104668681

一、下载引用echarts包
浏览https://www.echartsjs.com/zh/builder.html对echarts在线定制，按默认选择下载，注意柱状图Bar，折线图Line，饼图Pie。
在这里插入图片描述
点击页面底部的下载按钮，代码自动创建成echarts.min.js

将echarts.min.js文件移动的19文件夹下，同时新建index.html文件，在其head中引入echarts.min.js文件

二、柱状图Bar案例
在index.html的body中添加下列代码，一个div容器，在script中配置echarts图表。

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '期末考试成绩'
            },
            xAxis: {
                data: ["语文", "数学", "英语", "物理", "化学", "生物"]
            },
            yAxis: {},
            series: [{
                type: 'bar',
                data: [110, 120, 105, 89, 92, 86]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

option是图表的配置项，myChart.setOption(option)是自定义的myChart对象执行option配置方法，使图表生效。
option中，title.text是标题的文本，xAxis.data是x轴的罗列数据，yAxis是y轴，series.type是坐标系统的类型（这里配置的是bar柱状图），series.data是坐标系统条目的数据值，series.barWidth是坐标系统条目的宽度（'40%'是占该格宽度的40%）
在这里插入图片描述
三、折线图Line
将option替换成下列代码，其中series.type为line

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

在这里插入图片描述
四、饼状图Pie
将option替换成下列代码，其中series.type为pie

var option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ]
        }
    ]
};

在这里插入图片描述