Echarts的使用总结

最新推荐文章于 2023-08-14 11:23:00 发布
最新推荐文章于 2023-08-14 11:23:00 发布
阅读量782 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/insomnia_Y/article/details/106048026
版权

反向坐标轴

有时候做一些功能的折线图时需要使用到反向坐标轴（如排名的变化趋势）就需要用到Echarts的反向坐标轴的功能。

yAxis: {
    type: 'value',
    inverse: true, //y轴坐标轴向下
    axisLabel: {
        show: true,
        textStyle: {
            fontFamily: 'MaerskText-Regular',
        }
    },
},

执行Y轴反向后的Echarts图形

隐藏图表标题

可以使用如下代码或者直接删除这一条代码

title: {
    title: { text: null }, 
},

tooltip内容文字的样式设置

这里参考了一位博主的博客：echarts图中tooltip内容文字的样式设置
默认的tooltip就是一个div，直接在formatter里面添加span设置好颜色就可以了

tooltip: {
    backgroundColor: "#FFF", //设置tooltip的背景颜色颜色为白色（默认的为半透明黑色）
    borderColor: "#C3CBD6",	//修改边框线颜色（默认没有边框线颜色）
    borderWidth: 1,//修改边框线的宽度
    //axisPointer: { lineStyle: { color: "#C3CBD6" } },
    //formatter: '<span style="color: #657180; margin-left: 8px; float: right;">{a} <br/>{b} : {c}</span>' //内容显示格式
    textStyle: {//显示的字体颜色，样式以及大小
        fontSize: 12,
        color: '#657180',
        fontFamily: 'MaerskText-Regular'
    },
},

修改后的tooltip的样式
修改后的tooltip的样式
使用formatter改变数据显示方式（如添加百分号符号）

, formatter(params) {
    for (x in params) {
        return params[x].name + ":<br/>" + params[x].value+"%";
    }
}

使用formatter改变数据显示方式

雷达图

radar: {
    //shape: 'circle', //可以改变为圆弧形，默认是五角形
    name: {
        textStyle: {
            padding: [7, 7],//五个角的类别名离图形的上下左右距离
            color: '#2b425b',
            fontSize: 14,
            fontFamily: 'MaerskHeadline-Bold',
        },
    },//指示文字的样式
    indicator: nums,
},
series: [{
    symbolSize: 18, //五个角的圆圈大小
    name: 'Personal competence',
    type: 'radar',
    itemStyle: {
        normal: {
            color: 'red', //数值显示的颜色
            lineStyle: {
                color: '#29a4ff' //内部边框线的颜色，这里改为了蓝色
            }
        }
    },
    areaStyle: { normal: { color: '#ffffff' } },//内部区域图形的颜色
    data: [
        {
            value: values,
            label: {
                normal: {
                    show: true,
                    formatter: function (params) {
                        return params.value
                    }
                }
            }//折线上显示具体数值
        }
    ]
}]

在这里插入图片描述

柱形图（单一种类）

myChart.setOption(option);
option_Bar = {
    tooltip: {
        backgroundColor: "#FFF",
        borderColor: "#C3CBD6",
        borderWidth: 1,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        textStyle: {
            fontSize: 12,
            color: '#657180',
            fontFamily: 'MaerskText-Regular'
        },
    },//tooltip的样式设置
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: 'MaerskText-Regular',
                }
            },
            data: nums_Bar,
        }
    ],//x轴的样式和数值
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: 'MaerskText-Regular',
                }
            },
        }
    ],//y轴的样式和数值
    series: [
        {
            barWidth: '20',
            name: 'Volume',
            type: 'bar',
            data: values_Bar,
            itemStyle: {
                normal: {
                    color: '#43afd4', //柱形图的颜色设置，这里为蓝色
                    label: {
                        show: true,//是否在柱形图上显示数值
                        position: 'top',//设置柱形图数值显示的位置，这里设置在柱形图的顶部
                        formatter: '{c}',//柱形图数值的的格式，这里只让它显示了数值，当然也可以显示类名等等
                        fontFamily: 'MaerskText-Regular',//数值显示的字体样式
                        fontSize: 12,//数值显示的的字体大小
                    }
                },
            },
        },
    ]
};
myChart_Bar.setOption(option_Bar);

cgart柱形图

柱状图（多种类）

与只有一个种类的柱形图相比，多种类的需要再series中添加更多的数据源

var myChart = echarts.init(document.getElementById('Bar'));
option = {
    title: {
        text: 'TOP 10 IN THE TEAM',
        textStyle: {
            fontSize: 16,
            fontFamily: 'MaerskHeadline-Regular',
        }
    },
    color: ['#43afd4', '#13253b', '#878787'],//柱形图的颜色
    tooltip: {
        backgroundColor: "#FFF",
        borderColor: "#C3CBD6",
        borderWidth: 1,
        trigger: 'axis',
        formatter: function (params) {
            var res = '<div><p>' + params[0].name + '</p></div>'
            for (var i = 0; i < params.length; i++) {
                if (i==2) {
                    res += '<p>' + params[i].seriesName + ':' + params[i].data + '%</p>'
                } else {
                    res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>'
                }
            }
            return res;
        },
        textStyle: {
            fontSize: 12,
            color: '#657180',
            fontFamily: 'MaerskText-Regular'
        },
    },
    legend: {
        y: '0px',
        data: ['Total Score', 'Accuracy', 'Production']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            saveAsImage: { show: true }
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: 'MaerskText-Regular',
                }
            },
            data: names,
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    fontFamily: 'MaerskText-Regular',
                }
            },
        }
    ],
    series: [
        {
            barWidth: '15',
            name: 'Total Score',
            type: 'bar',
            barGap: 0,
            data: AVGScore,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        fontFamily: 'MaerskText-Regular',
                    }
                },
            },
        },
        {
            barWidth: '15',
            name: 'Accuracy',
            type: 'bar',
            data: AVGAcc,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        fontFamily: 'MaerskText-Regular',
                    }
                },
            },
        },
        {
            barWidth: '15',
            name: 'Production',
            type: 'bar',
            data: AVGPro,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}%',
                        fontFamily: 'MaerskText-Regular',
                    }
                },
            },
        },
    ]
};
myChart.setOption(option);

在这里插入图片描述

折线图（单一种类折现趋势）

option_RankLine = {
    tooltip: {
        backgroundColor: "#FFF",
        borderColor: "#C3CBD6",
        borderWidth: 1,
        textStyle: {
            fontSize: 12,
            color: '#657180',
            fontFamily: 'MaerskText-Regular'
        },
        trigger: 'axis'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',//显示在图形的最右边
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },//数据视图，即以表格的方式显示折线的数据
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },//切换为折线图，柱形图，堆叠图按钮
            restore: { show: true },//充型加载数据按钮
            saveAsImage: { show: true }//下载图片按钮
        }
    },//侧边的工具栏
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },//图形到容器div的距离
    xAxis: {
        type: 'category',
        axisLabel: {
            show: true,
            textStyle: {
                fontFamily: 'MaerskText-Regular',
            }
        },
        boundaryGap: false,
        data: rank_weeknum,
    },
    yAxis: {
        type: 'value',
        inverse: true,//反向y轴
        axisLabel: {
            show: true,
            textStyle: {
                fontFamily: 'MaerskText-Regular',
            }
        },
    },
    series: [
        {
            name: 'Rank',
            type: 'line',
            data: rank_num,
            itemStyle: {
                normal: {
                    color: '#43afd4',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        fontFamily: 'MaerskText-Regular',
                    }
                },
            },
        },
    ]
};
myChart_RankLine.setOption(option_RankLine);

单一种类折线图

折线图（多种类）

多种类折线图和单一折线图和多种类的折线图的区别是series中的数据类别更多，折线就会出现多条折线

myChart_Line.setOption({
    title: {
        text: 'Historical case data',
        textStyle: {
            fontSize: 16,
            fontFamily: 'MaerskHeadline-Regular',
        }
    },
    tooltip: {
        backgroundColor: "#FFF",
        borderColor: "#C3CBD6",
        borderWidth: 1,
        textStyle: {
            fontSize: 12,
            color: '#657180',
            fontFamily: 'MaerskText-Regular'
        },
        trigger: 'axis'
    },
    color: ['#878787', '#00786b', '#f46a55', '#cecece', '#13253b', '#43afd4'],//设置各类别折线的颜色
    legend: {
        data: ["AMD booking", "Case", "Doc", "Fresh booking", "Report", "VAS report"]
    },//显示在顶部的类别提示
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            //magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            //restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: names_date
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'AMD booking',
            type: 'line',
            stack: '总量',
            data: nums_All_AMD_booking
        },
        {
            name: 'Case',
            type: 'line',
            stack: '总量',
            data: nums_All_case
        },
        {
            name: 'Doc',
            type: 'line',
            stack: '总量',
            data: nums_All_Doc
        },
        {
            name: 'Fresh booking',
            type: 'line',
            stack: '总量',
            data: nums_All_Fresh_booking
        },
        {
            name: 'Report',
            type: 'line',
            stack: '总量',
            data: nums_All_Report
        },
        {
            name: 'VAS report',
            type: 'line',
            stack: '总量',
            data: nums_All_VAS_report
        }
    ]
});

多条折线

insomnia_Y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts设置上下Y轴,多轴设计
Jantelope的博客
08-23 6266
echarts柱状图,设置上下Y轴,X轴在中间,柱子实现向上以及向下延伸,
ECharts y轴（yAxis）
Erek的前端博客；
09-03 2万+
yAxis: { show: true, // 是否显示 y 轴 position: 'top', // y 轴的位置（'top'，'bottom'） type: 'category', // 坐标轴类型 nameLocation: 'end', // 坐标轴名称显示位置 nameGap: 15, // 坐标轴名称与轴线之间的距离 nameRotate: 10, // 坐标轴名字旋转，角度值 inverse:.
[图表]pyecharts模块-反转柱状图
likinguuu的博客
06-03 1516
[图表]pyecharts模块-反转柱状图
ECharts关于y轴刻度调整
热门推荐
小柠檬爱编程
09-23 3万+
修改y轴刻度之后是这样的 直接上代码 yAxis: { min:0, //取0为最小刻度 max: 100, //取100为最大刻度 min:'dataMin', //取最小值为最小刻度 max: 'dataMax', //取最大值为最大刻度 min: function(value) {//取最小值向下取整为最小刻度 return Math.floor(value.min).
echart--柱状图 从上到下排列 不居中
这里是迷阵的博客耶
02-17 1928
echart的柱状图 我需要长这样，但是变成了下面那个图的样子。2.y轴的数据默认高度是auto，设置一个定死的值就行。在对应位置加上框里的参数！1.x轴的对其方向不对。3.y轴的对其方向不对。
详解ECharts使用心得总结
09-01
**ECharts 使用心得总结** ECharts 是一个基于 JavaScript 的开源可视化库，由百度开发并维护。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图的绘制。在本文中，我们将探讨ECharts...
echarts知识总结
08-05
ECharts知识总结 ECharts是一款基于JavaScript的数据可视化图表库，提供了多种图表类型、交互方式和自定义选项，广泛应用于数据分析、科学研究、商业智能等领域。下面是关于ECharts的一些知识点总结： 一、ECharts...
数据可视化echarts总结
03-23
数据可视化echarts总结
Echarts笔记总结
11-12
关于Echarts的总结，重要是以柱状图为例子，附带截图和源码，基本一看就懂了！！
echarts 柱状图 X轴 上下颠倒
H_Wnnnn的博客
12-02 1735
效果图: 代码: let xData = [ '开关电源', '铅酸电池', 'UPS设备', '普通空调', '机房环境', '智能电表' ]; let yData = ['-111', '-100', '-95', '-80', '-60', '-45']; option = { backgroundColor: '#080938', grid: { top: '10%', left: '-5%', bottom: '5%',
Echarts反转x轴（图表显示在y轴左侧）
qsya的博客
03-26 4829
描述： 设计给出的设计稿有一个图表需要横着向左显示，跟另一个图表对应。设计图如下： 效果图： 分析： 查阅echarts官方文档好像并没有相关的参数设置，但是设置负数会显示在负x轴，再用formatter转成正数显示即可。 option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis',
echarts 自定义 x 轴和 y 轴滚动
tongtianjianmu的博客
08-14 352
series: [returnencode;{x;data;xDataArr,｝
echarts爬坑记—数组反转reverse导致源数据发生改变
城南蝈蝈
08-12 891
echarts 填充柱状图的顺序的反的。结果悲剧了，一是来回切换柱状图的时候发现，柱状图的数据每切换一次数据颠倒一次，更要命的是原来的饼图数据由于和柱状图数据的同一个数据源，结果，比例数据全是反的。这个问题的原因在于我们使用的reverse函数，这个函数能把数组的数据反转过来，但是有个问题，reverse会把源数据的也反转过来，就算我们把数据赋值出来再使用reverse函数，还是会将原始数据全部反转过来，那么应该怎么解决呢？这样的话，我们的柱状图也能按照顺序要求显示数据，而且饼图的数据也不会乱了。...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
zxl_start的博客
05-27 2206
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: { color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF'], tooltip: { trigger: 'axis' }, legend: { data: ['雨量', '水位', '保证水位', '警戒水位', '累计雨量'], sele
echarts 如何使柱状图左右展示_如何设置echarts柱状图两组不同的数据错开显示，目前他们时在一起重叠显示的？...
weixin_40001048的博客
12-19 2665
//同比环比var myChart= echarts.init(document.getElementById('bar_chart'));var xAxisData = ['全部','轿车','SUV','MPV'];var data1 = [1.03,0.44,0.88,0.67]; //同比var data2 = [-0.4,-0.56,-0.67,-0.53];//环比option = {...
echarts-柱状图-柱状图标签旋转
weixin_57246351的博客
04-18 3191
<template> <div> <div> <!--为echarts准备一个具备大小的容器dom--> <div id="org_ech_line"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export default { dat
ECharts Y轴倒置，Y轴逆向，图表反向，3.0以上版本
风云的博客
11-21 2万+
ECharts Y轴倒置，Y轴逆向，图表反向，3.0以上版本
echarts使用v-show
最新发布
10-29
Echarts是一个优秀的数据可视化库，可以帮助开发者快速构建各种图表和数据展示的界面。在使用Echarts时，我们通常会用到v-show这个指令来控制图表的显示和隐藏。 v-show是Vue.js框架中的一个指令，用于根据表达式的值来控制DOM元素的显示和隐藏。当表达式的值为真时，DOM元素会显示出来；当表达式的值为假时，DOM元素会隐藏起来。 在使用Echarts时，可以将图表所在的DOM元素与v-show指令结合使用，通过改变表达式的值来控制图表的显示和隐藏。 例如，假设有一个按钮来控制图表的显示和隐藏，通过点击按钮可以改变一个布尔类型的变量showChart的值。通过在图表所在的DOM元素上添加v-show指令，设置表达式为showChart，就可以实现根据showChart变量的值来显示或隐藏图表。 ``` <template> <div> <button @click="toggleChart">点击切换图表显示</button> <div v-show="showChart" id="chart"></div> </div> </template> <script> export default { data() { return { showChart: true, // 其他图表相关的配置 } }, methods: { toggleChart() { this.showChart = !this.showChart; }, // 其他方法和事件处理逻辑 }, mounted() { // 初始化Echarts图表 const chart = echarts.init(document.getElementById('chart')); // 图表的相关配置和数据处理逻辑 // ... } } </script> ``` 通过上述代码，可以实现点击按钮切换图表的显示和隐藏效果。当showChart变量为真时，图表会显示出来；当showChart变量为假时，图表会隐藏起来。 总结来说，使用v-show可以方便地控制Echarts图表的显示和隐藏，提升了页面的交互性和用户体验。同时，结合Vue.js框架的特性，可以更加灵活地处理图表的显示和隐藏逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值