首次使用Echarts

胖胖pxy
1,058 阅读6分钟

因为工作需要，所以简单学习了一下Echarts，文中如有错误之处，还望指出。费话不多说，直接开整。

导入Echarts （本次使用是5.3.3的版本）

我是在 www.jsdelivr.com/package/npm… 这里拿到的源码

sss.jpg

进入页面后， Ctrl+a ,全选，Ctrl+c ,复制，然后到某个js文件中将复制的内容Ctrl+v,粘贴过去，之后用script标签引入粘贴过去的这个文件就可以使用了

如果你要是找不到上图标记的文件的话，就直接点下面这个地址，，跳转后在进行复制，粘贴就行了

cdn.jsdelivr.net/npm/echarts…

如果上面的链接都不想点的话，那就，在给你一个引入源码的方法吧

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>

，好这样我们就成功的Echarts给引入了进来，然后就可以为所欲为了

第一个图表（柱状图）

准备工作已经完成，现在就开始画我们的第一个图表吧，既然是第一个，那就先来一个简单的，最常见的柱状图，（我是习惯叫他条形图）

html代码

要想画图，就需要在页面上有这个图表自己的一片小天地，所以，先写个div确定下自己的地盘

<head>
    <style>
        #test {
            width: 600px;
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- div一定要有宽高，不然最后页面就啥都没有 -->
    <div id="test"></div>

    <!-- 导入进来的Echarts -->
    <script src="./echarts.js"></script>
    
</body>

js代码，初始化Echarts

首先使用init初始化Echarts实例,并将DOM传入进去


const test = document.getElementById('test');
const firstCharts = echarts.init(test);

title配置

之后，也就是最后一步（对就是最后一步），使用setOption.来进行图形的配置

firstCharts.setOption({
  // title表示标题位置的配置
  // text表示标题的名字
    title: { text: '第一个图表' }
})

位置

实际上当写完这个配置时，就可以看见页面上我们这个div的左上方出现了这个图表的名字，位置的话默认是左上方。

222.jpg

如果我们不想让在这个图表的名字在左上方这个位置，就可以通过x,y两个配置去更改，x,y就是这个图表的坐标系，看图，更直观；其中top、center和bottom就是y的值，left、center和right就是x的值，，当然也可输入数字。单位默认为px,来title的控制位置，x,值越大，位置越靠右，y值越大，位置越靠下。

222.jpg

firstCharts.setOption({
    title: { 
    text: '第一个图表' ,
    x: 'right', // 更改x轴的位置
    y: 'bottom',// 更改y轴的位置
    }
})

效果如下 333.jpg 除了x,y可以设置位置。也可以使用top,bottom,left,right,来设置title的位置，内容也是可以为数字，单位默认px。除了内容为数字，也可以为top.bottom.left,right，center来作为值。

firstCharts.setOption({
    title: {
        text: '第一个图表', left: 'center', top: 'center',
    }
)}

999.jpg

xAxis配置和yAxis配置

图表的名字有了，那么该制作我们的图表了，请看下一个配置xAxis,用来描述x轴都有哪些配置

firstCharts.setOption({
    title: {
        text: '第一个图表', x: 'left', y: 'top',
    },
    // xAxis:表示x轴都有哪些数据
    xAxis: {
        data: ['男装', '女装', '男女装', '不男不女装', '上衣', '下衣']
    },
})

444.jpg

有xAxis,当然就有yAxis了，xAxis和yAxis两个的配置写法是一样了，只是一个是x轴的数据，一个是y轴的数据，不过我们一般不用写，y轴的数据一般会自动生成，如果有特殊需求，可以根据自己的需求进行配置，写法和xAxis一样，这里就不再写了

legend配置

legend表示 xAxis的数据 要显示的内容是什么

firstCharts.setOption({
    title: {
        text: '第一个图表', x: 'left', y: 'top',
    },
    xAxis: {
        data: ['男装', '女装', '男女装', '不男不女装', '上衣', '下衣']
    },
    yAxis: {},
    //legend表示要显示每一个xAxis的今年销量和去年销量
    legend: {data:['去年销量', '今年销量']},
})

555.jpg

同样legend也是可以通过title配置里面的位置配置来更改legend的位置

图中legend是横向排列的，可以通过使用orient属性来更改横纵向的排列顺序，默认为'horizontal'横向，vertical为纵向

firstCharts.setOption({
    title: {
        text: '第一个图表', x: 'left', y: 'top',
    },
    xAxis: {
        data: ['男装', '女装', '男女装', '不男不女装', '上衣', '下衣']
    },
    yAxis: {},
    
    legend: {
    orient: 'vertical',
    x:'right',
    y:'top',
    data:['去年销量', '今年销量']},
    
})

666.jpg

series(最后一个，写完就能看见效果了)

series,主要用来配置图表的画面内容，里面的配置，看下面的代码的注释吧

const test = document.getElementById('test');
const firstCharts = echarts.init(test);

firstCharts.setOption({
    title: {
        text: '第一个图表', x: 'left', y: 'top',
    },
    xAxis: {
        data: ['男装', '女装', '男女装', '不男不女装', '上衣', '下衣']
    },
    yAxis: {},
    
    legend: {data:['去年销量', '今年销量']},
    
    //最后一个
    series: [
        {
           // name用来与legend连接的，表示这个里面的内容是去年的销量
            name: '去年销量',
            // type:'bar'， 代表这是个条形图（柱状图）
            type: 'bar',
            // data: 里面的数据与xAxis相对应
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '今年销量',
            type: 'bar',
            data: [8, 26, 46, 20, 5, 15]
        }
    ]
})

当写完这些东西后，终于可以和我们的条形图（柱状图）相见了，下图，就是完成后的一个简单的图

tooltip

这个属性是当鼠标指到某个条形图中时，显示出详情


firstCharts.setOption({
    tooltip:{trigger: 'item'}
})

999.jpg

好这个基本的柱状图就算是完成了

第二个图（饼图）

基础属性大多和柱状图的属性一样，直接上代码，不多说了

<div id="test" style=" width: 600px;height: 300px;border: 1px solid #000;"></div>

const test = document.getElementById('test');
const firstCharts = echarts.init(test);
firstCharts.setOption({
    title: {
        text: '饼图',
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: '销量',
        right: 'top'
    }
})

series

主要还是说一下饼状图的series属性 ，详情代码中的注释见

firstCharts.setOption({
    series: [
        {
            name: '销量',
            // 值为pie表示使用饼状图
            type: 'pie',
            
            // 这个radius的值为50% 表示的是 初始化Echarts时，传入的那个dom元素的宽高，
            // 取较短的值的50%的大小作为这个饼状图的直径
            // 这个列子中上面的div的width为600px，height为300px，
            // 所以，这个饼状图的直径为300px
            radius: '50%',
            data: [
                // 表示女装数量为1048
                { value: 1048, name: '女装' },
                { value: 735, name: '男装' },
                { value: 580, name: '男女装' },
                { value: 484, name: '不男不女装' }
            ]
        }
    ]
})

下面是代码所显示的图形

1010.jpg

series.emphasis.itemStyle

主要用来配置鼠标移入饼状图中的某块区域后的样式,这个属性属于series，详情依旧看代码注释

firstCharts.setOption({
    series: [
        {
            emphasis: {
                itemStyle: {
                //表示鼠标移入某块区域后这块区域影子的扩大面积，值越大，扩散越大
                    shadowBlur: 20,
                }
            }
        }
    ]
})

1111.jpg

firstCharts.setOption({
    series: [
        {
            emphasis: {
                itemStyle: {
                //表示鼠标移入某块区域后这块区域影子延x轴和y轴的偏移量，值越大，便宜越多
                    shadowOffsetX: 20,
                    shadowOffsetY: 20,
                }
            }
        }
    ]
})

1212.jpg

firstCharts.setOption({
    series: [
        {
            emphasis: {
                itemStyle: {
                    shadowOffsetX: 20,
                    shadowOffsetY: 20, 
                    //表示鼠标移入某块区域后这块区域影子的颜色
                    shadowColor: 'rgba(238, 102, 102, 0.5)'
                }
            }
        }
    ]
})

1313.jpg

有没有发现这些属性很象css里的box-shadow里面的属性呢。

这几个属性的主要目的其实都是为了方便人们的区分与页面效果的美观

图表的小操作

777.jpg 我们可以通过点击这个地方（看图）

555.jpg

让图表变成仅仅显示今年的销量的图表

888.jpg 不知道你有没有发现这个小操作，又或者是我low了，哈哈哈

结尾

Echarts是非常强大，本文所说的仅仅是Echarts的冰山一角，一些最为基础的用法，也是我第一次使用Echarts的一个小小的总结。文中如有错误之处，还望指出，最后感谢阅读。

avatar
文章
阅读
粉丝