webstorm中可视化方法/引入图表的方法_在webstrom里series的作用

作者：我家小花儿 | 2024-02-20 15:57:35

踩

在webstrom里series的作用

文章目录

webstorm中可视化方法/引入图表的方法
一、下载并引入echarts.js文件
- 下载方法：
二、准备一个具备大小的dom容器
三、初始化echarts实例化对象
四、指定配置项和数据（option）
- 把每个柱子都设置为不同的颜色的方法
五、将配置项设置给echarts实例化对象

webstorm中可视化方法/引入图表的方法

一、下载并引入echarts.js文件

下载方法：

从echarts的官网下载：点击进入官网下载页面
通过 npm 获取 echarts，npm install echarts --save，点击查看详细过程
在 ECharts 的 GitHub 获取
通过 jsDelivr 等 CDN 引入

二、准备一个具备大小的dom容器

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*准备一个DOM容器，必须先指定容器的高度和宽度，然后才能将图表放入*/
        .box{
            width: 800px;
            height: 800px;
            background-color: pink;
        }

    </style>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13

三、初始化echarts实例化对象

/*初始化实例对象，通过echarts这个全局对象里面有一个实例化对象的方法叫做.init（），在（）里面写上dom容器*/
    //总结的初始化形式为：echarts.init(dom容器);
    /*将获取的对象赋值给一个变量*/
    var myChart = echarts.init(document.querySelector(".box"));
1
2
3
4

四、指定配置项和数据（option）

option = {
//color设置线条（柱子）的颜色，注意后面跟数组
//四个颜色分别是四条线的颜色，几条线就是几个颜色
	color:['pink','red','bule','green'],
    //大设置标题
    title: {
        text: '折线图'
    },
    //图标的提示框
    tooltip: {
        //触发方式，axis意思是坐标轴，其他触发方式可以echarts官网的文档里面的配置项手册里可以查
        trigger: 'axis'
    },
    //图例组件，data就是显示每条线的代表的意义
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    //网格配置，dom容器是外面的大盒子，而grid是dom里面的网格盒子，言外之意grid是控制图表（直角坐标系：折线图，柱状图，）的大小，left:图表距dom容器左边的距离，默认值是3%，
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
        //containlable（控制表）值为true时意思是显示坐标轴的刻度标签，值为false时将不会显示刻度标签
    },
    //工具箱组件，可以将图表另存为图片
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    //x轴（axis:轴）
    xAxis: {
    //当type(类型)为category（类目）时，那么x轴代表的内容统称为类目，可以是时间（周一到周日或者多个年份），也可以是多个电影名称，书名等均可
        type: 'category',
        //boundaryGap（边界缝隙）：gap意思就是缝隙的意思，值为true时，意思是线与y轴的边界有缝隙（在x轴设置的属性就是与y轴的缝隙，在y轴的属性里设置就是与x轴的缝隙），当值为false时，代表与y轴没有缝隙。
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    //y轴
    yAxis: {
    //type为value时，代表y轴要表示各个类的数据，即类目数据在Y轴展示，
        type: 'value'
    },
    //series:（系列）表示系列图表配置，作用就是决定显示哪一种图表
    series: [
        {
            name: '邮件营销',//series里面如果有name值，那么legend里面的data值可以删去，他们表示的是同一个意思
            type: 'line',
            //series的type(类型):当类型是line时，代表显示的是折线，类型为bar时，代表显示的是柱状图，pie是饼图，radar就是雷达图，
            //stack: '总量',
            //stack(堆叠)：数据会做加和计算累积堆在上面，线与线之间减少了交叉的可能
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            //stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            //stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            //stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            //stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

总结：
对以上代码的总结

把每个柱子都设置为不同的颜色的方法

    var myColor = ["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6","#F8C574","#4AB9FF","#074BB7","#B607B6"]

series: [
            {
                name: '豆瓣评分',
                type: 'bar',
                data: [7.9,6.0,7.2,5.2,5.6,7.2,6.1,8.3,8.3],
                //修改圆角
                itemStyle: {
                    barBorderRadius: 20,
                    //修改柱子颜色,将柱子的颜色通过索引一一对应到刚开始定义的var myColor的数组中的每个颜色
                    color: function (params) {
                        return myColor[params.dataIndex];
                    }
                },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

通过定义一个颜色类的数组，然后index索引，就可以一一对应到柱子的颜色中去

五、将配置项设置给echarts实例化对象

myChart.setOption(option);
1

myChart是自己起的实例化对象名称
option是配置项名

个人笔记而已，仅供参考，如果有错误的话还请留言

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/120255