Echarts的初步使用

一.ECHARTS的介绍与调用

​ ECHARTS,是使用JavaScript实现的一个开源的库,功能是可视化,是由百度开发的,所以它的文档都是中文,查阅起来很方便

​ 直接在官网下载地址上就可以下载,下载后一般只需要用到echarts.min.js文件。

​ 可以把它看成一个插件,使用时直接调用即可:

<script src="./js/echarts.min.js"></script>

二.ECHARTS的使用

1.引入完成后,需要为图表建立DOM 容器
<style>
        .box{
            width: 600px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.5);
        }
</style>
<div class="box"></div>

这个容器必须具备宽高

2.初始化ECHARTS实例对象
 <script>var char_1 = echarts.init(document.querySelector(".box"));</script>

这里init是echarts这个全局变量的方法,本身就存在,其功能就是初始化ECHARTS实例对象,创建一个 ECharts实例并返回给我们的char_1。这里的方法的变量是我们的DOM容器。

3.指定配置项和数据
<script>
    var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
</script>

变量option即是我们的配置项,通过增添、修改里面的内容来对表格进行操作。熟悉的同学可以直接手打,嫌麻烦的同学可以去官方实例那里,找出自己的想要的图,进行修改,再复制粘贴。

4.将配置项(option)设置给新建的实例对象
<script>char_1.setOption(option);</script>

因为上一步只是定义了option,没有实际使用在我们的图表中,所以这里需要用setOption这个方法将option,也就是配置项赋给实例对象。

这样一个基础的表格就添加好了。

三.配置项中标签的介绍。

​ 在以上四步中,除了设置配置项,其余都是固定的代码,所以这里细讲一下配置块里面的组件。

​ (注:所有组件的使用方法都可以在文档中查找,用ECHARTS要结合文档使用

  • title组件:标题组件,text里面的内容即是图表标题,subtext是副标题;
  • legend组件:图例组件,data里面是每组数据的名字,可以不设置,通过后面的自动设置;
  • grid组件:控制图表大小组件,containLabel是否包含坐标轴的刻度标签;
  • xAxis组件:横坐轴组件,type控制坐标轴类型,data是每个类目数据,可以不设置,通过后面的自动设置;
  • yAxis组件:与x轴同理,数据会自适应;
  • toolbox组件:工具栏组件,设置图表被外部操作的一些工具,如下载;
  • tooltip组件:提示框组件,设置鼠标放在图表上是否有提示框, trigger是触发类型;
  • color组件:操作数据颜色;
  • series系列列表:里面的内容决定了图表内容;
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页