Echarts的初步认识

最新推荐文章于 2024-08-02 13:35:44 发布

紫苏炒米饭

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量472

点赞数

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

本文链接：https://blog.csdn.net/weixin_45615607/article/details/121618832

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，有以下的五个步骤

引入echarts.js文件
在视图层准备一个div盒子
初始化echarts实例化对象
准备配置项
将配置项设置给echarts实例对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 -->
    <script src="../lib/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 500px;height: 500px;"></div>
    <div id="main2" style="width: 600px;height: 600px;"></div>
    <script>
        var box = echarts.init(document.getElementById('main'))
        var box2 = echarts.init(document.getElementById('main2'))
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量', '买进']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',                  
                    data: [5, 20, 36, 10, 10, 20],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }
            ]
        };
        let option2 = {
            title: {
                text: 'echarts 教育书籍详情柱状图',
                link：'https://www.baidu.com/'
            },
            tooltip: {

            },
            legend: {
                data: ['售出', '买进']
            },
            xAxis: {
                data: ['语文', '数学', '英语', '历史', '化学', '美术', '体育']
            },
            yAxis: {

            },
            series: [
                {
                    name: '售出',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20, 30],

                },
                {
                    name: '买进',
                    type: 'bar',
                    data: [15, 30, 39, 20, 20, 20, 10]
                }
            ]
        }
        box.setOption(option)
        box2.setOption(option2)
    </script>
</body>

</html>

2，关于代码中配置的说明

xAxis

直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的

呈现

yAxis

直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去

series 下找数据进行图表的绘制

series

每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

title

echart的标题（text为标题，link可以设置超链接）textStyle可以设置一些具体的样式

配置项的网站：Documentation - Apache ECharts

紫苏炒米饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts的初步认识

1，有以下的五个步骤引入echarts.js文件在视图层准备一个div盒子初始化echarts实例化对象准备配置项将配置项设置给echarts实例对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫