js-echarts图得配置（南淝河项目）

最新推荐文章于 2024-06-21 11:26:34 发布
最新推荐文章于 2024-06-21 11:26:34 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： echarts常见配置 文章标签： echarts图样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41906649/article/details/84823553
版权

echarts图添加滚动条

if (data.length > 4) {
            	dataZoom = [
                        {
                        	type: 'slider',
                        	show: false,
                        	xAxisIndex: [0],
                        	start: 1,
                        	end: 0,
                        	handleSize: 1,
                        	height:"2%",
                        	width:"76%",
                        	bottom:"3%",
                        	textStyle:false,
                        	left:'12%',
                        	borderColor:'rgb(5,181,232)',
                        	fillerColor:'rgb(5,181,232)'
                        }
                ];
                dataZoom[0].show = true;
                dataZoom[0].end = (4 / data.length * 100).toFixed(0);
            }

echarts图截取横坐标的显示

 xAxis: {
                    data: xData,
                    axisTick: {show: false},//坐标轴小标记，默认不显示
                    axisLine: {show: false},//坐标轴线，默认显示
                    axisLabel:{
                        show: true,
                        textStyle: {
                            fontSize: 16,
                            fontFamily: '黑体',
                            color:'#059dc7'
                        },
                        formatter:function(str){
                            var xname="";//放最终拼接成的字符串
                            var strLen=str.length;//实际长度
                            var provideLen=3;//控制一行长度
                            var rowNum=Math.ceil(strLen / provideLen);//向上取整，算出换行数
                            if(strLen>provideLen){
                                for(var i=0;i<rowNum;i++){
                                    var tempStr="";//暂放每次截取的字符串；
                                    var start=i * provideLen;//开始截取的位置；
                                    var end=start + provideLen;//结束截取的位置；
                                    if(i == rowNum-1){//最后一行特殊处理，最后一次不换行
                                        tempStr=str.slice(start,strLen);
                                    }else{
                                        tempStr=str.slice(start,end)+"\n";
                                    }
                                    xname += tempStr;
                                }
                            }else{
                                xname=str;
                            }
                            return xname;
                        }

                    }//坐标轴文本标签
                },
  • y轴
yAxis: {
                    max: maxNum,
                    axisLine: {show: false},
                    axisLabel:{show: false},
                    axisTick: {show: false},
                    splitLine:{show: false}
                },
                
series: [
                    {
                        name: '危险源数',//系列名称，如启用legend，将被legend.data索引相关
                        type: 'bar',//图表类型
                        symbolClip: true,
                        barCategoryGap:"65%",
                        label:{
                        	normal: {
                                show: true,
                                position: 'inside',
                                formatter: function (param) {
                                    return param.value;
                                },
                                textStyle: {
                                    fontSize: 12,
                                    fontFamily: 'Arial',
                                    color: '#000'
                                }

                            }
                        },
                        itemStyle: {
                            normal: {
                                color:function(colors){
                                    var colorList=colorAry;
                                    return colorList[colors.dataIndex]
                                },
                                barBorderRadius:[6,6,0,0]
                            }
                        },
                        data: yData,
                        z: 10//二级层叠控制，相同level上z越大层级越高
                    },
                    {
                        name: 'full',
                        type: 'bar',
                        barGap:'-100%',
                        //tooltip:false,
                        itemStyle: {
                            normal: {
                                color: '#2d2f31',
                                barBorderRadius:[6,6,0,0]
                            }
                        },
                        data: fullData
                    }
                ],

echarts图改变不同柱子的颜色

series: [
                    {
                        name: '食品费',
                        //type决定图表类型
                        type: 'pictorialBar',
                        symbolRepeat: true,
                        symbolSize: [36, 4],
                        symbolMargin: 1,
                        data: [15, 25, 18],
                        barWidth: '30%',
                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function(params) {
                                        let colorList = [
                                            "#c23531",
                                            "#2f4554",
                                            "#61a0a8",
                                
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            },
                    },
                    
                ]

echarts 图给数据拼接单位

label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color:'#00ffff',
                            fontSize:14,
                            formatter:'{c}%'
                        },
                    },

echarts图修改图例的样式，以及显示左右两边的位置

legend: [
                {
                    x:'left',
                    top: '5%',
                    left:'10%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    itemWidth:8,
                    data: [{
                        name: "COD",
                        icon:'square'

                    }]
                },
                {
                    x:'center',
                    top: '5%',
                    left:'22%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    itemWidth:8,
                    data: [{
                        name: "氨氮",
                        icon:'square'
                    }]
                },
                {
                    x:'right',
                    top: '5%',
                    left:'82%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },
                    itemWidth:8,
                    data: [{
                        name: "总磷",
                        icon:'square'
                    }]
                }
            ],

图例显示图片

图例配置图片样式
 legend:[
                {
                    x:'left',
                    itemWidth:30,
                    itemHeight:10,
                    left:240,
                    data:[
                        {
                            name:xname1,
                            icon:'image://app/components/common/charts/diagramBarCharts/img/chaobiao-icon.png',
                            textStyle:{
                                color:'#fff',
                                fontSize:12
                            },
                        },
                    ]
                },
                {
                    x:'right',
                    itemWidth:10,
                    itemHeight:10,
                    left:360,
                    data:[
                        {
                            name:xname2,
                            icon:'circle',
                            textStyle:{
                                color:'#fff',
                                fontSize:12
                            },
                        }
                    ]
                }
            ],

echarts图显示双y轴

yAxis: [{
                type: 'value',
                name: '吨/年',
                min: -50,
                max: maxL,
                position: 'left',
                axisLine: {
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                axisLabel: {
                    formatter: '{value} ',
                    lineStyle:{
                        color:"#fff"
                    }
                },
                splitLine:{
                    show:false,
                },
            },
                {
                    type: 'value',
                    name: '吨/年',
                    min: -50,
                    position: 'right',
                    **yAxisIndex:1,**
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} ',
                        lineStyle:{
                            color:"#fff"
                        }
                    },
                    splitLine:{
                        show:false,
                    },
                }
            ],

serise使用数组配置多个不同类型以及多个不同数据组

seriesData.push(
                {
                    name:this.opts.series.lineData[i].name,
                    type: 'line',
                    yAxisIndex: 1,
                    symbol:'none',
                    color:color[i],
                    // barWidth:10,
                    data:linedata[i].data,
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                type:'dashed',
                            }
                        }
                    }
                }
            )

==============================
 seriesData.push(
                {
                    name:bardata[i].name,
                    type: 'bar',
                    yAxisIndex: 1,
                    barWidth:10,
                    data:bardata[i].data,
                }
            );

===============================

http://gallery.echartsjs.com/editor.html?c=xB1vJ4Lz87

排口整改
let max = 300,
    value = 200;

option = {
    backgroundColor: 'black', //背景必须与symbal颜色一样
    "xAxis": {
        type: 'value',
        "max": max,
        "splitLine": {
            "show": false
        },
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "axisTick": {
            "show": false
        }
    },
    "yAxis": [{
        "type": "category",
        "inverse": false,
        "data": [],
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "margin": -4,
            "textStyle": {
                "color": "#fff",
                "fontSize": 16.25
            }
        }
    }],
    "series": [
         {
                        name: '餐盒费',
                        //type决定图表类型
                        type: 'pictorialBar',
                        symbolRepeat: true,
                        symbolSize: [4, 20],
                        // z: -10,
                        symbolMargin: 2,
                        //stack 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                        stack:'费用',
                        data: [20],
                        barWidth: '30%',
                        itemStyle: {
                          color:'#51FFAE',
                        },
                    },
                    {
                        name: '食品费',
                        //type决定图表类型
                        type: 'pictorialBar',
                        symbolRepeat: true,
                        symbolSize: [4, 20],
                        symbolMargin: 2,
                        // z: -1,
                        //stack 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                        stack:'费用',
                        data: [15],
                        barWidth: '30%',
                        itemStyle: {
                          color:'#CEC608',
                        },
                    },
        // { //内
        //     type: 'pictorialBar',
        //     barWidth: 40,
        //      symbolRepeat: true,
        //                 symbolSize: [4, 36],
        //                 symbolMargin: 1,
        //     label: {
        //         normal: {
        //             show: true,
        //             position: 'right',
        //             textStyle: {
        //                 color: '#fff'
        //             },
        //             formatter: function(e) {
        //                 return (e.value / max * 100).toFixed(2) + "%"
        //             }
        //         }
        //     },
        //     legendHoverLink: false,
        //     silent: true,
        //     itemStyle: {
        //                         normal: {
        //                             //每根柱子颜色设置
        //                             color: function(params) {
        //                                 let colorList = [
        //                                     "#c23531",
        //                                     "#2f4554",
        //                                 ];
        //                                 return colorList[params.dataIndex];
        //                             }
        //                         }
        //                     },
        //     data: [value]
        // },
        { //框
            type: 'bar',
            symbolRepeat: true,
            symbolSize: [4, 36],
            symbolMargin: 1,
            barWidth: 50,
            barGap: '100%',
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    textStyle: {
                        color: '#000'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)', //底色
                    barBorderRadius:50,
                    borderWidth: 2,
                    borderColor: 'grey'
                }
            },
            data: [max],
            z: 1,
        },
        
    ]
};
yangxiaohui-home
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts配置项
react打断点调试
10-12 601
//长刻度的设置 axisTick: { // 坐标轴小标记 length :3, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: '#fff', shadowColor : '#fff', //默认透明 shadowB...
Echarts地图配置
yokimiya
09-18 3611
最终效果： 组件代码 <template> <div class="container"> <div id="map"></div> <button :data-code="geoName" @click="changeMap">{{geoName}}</button> </div> </template> <script> import axios from 'axios'
封装一个公用的【Echarts图表组件】的3种模板
weixin_50450473的博客
07-31 6060
在components下创建一个echarts.vue文件 <template> <div> <div class="know_r_echart"> <div id="atlasChart"></div> </div> </div> </template> <script> import * as echarts from 'echarts' export ..
echarts入门教程（超级详细带案例）
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
关于Echarts的简单基础用法
2401_85833717的博客
06-21 305
yingxiao
echarts部分知识点汇总——基础积累
yehaocheng520的博客
01-05 4607
最近公司组织的内部培训，发现同事们准备的内容都很充分，我有一些基础很薄弱的地方，可以有一些提升。 现在将同事准备的内容摘录在此，有需要的时候可以自取。 1.函数封装option——适用于同一页面多个图表 echart中的配置项option内容是很多的，如果一个页面上有需要用到多个图表，则最好是封装成一个option的函数，否则需要重复写代码，毕竟配置项都很多重复的内容。 大致内容如下： function optionFn(xData,yData){ var option = { ..., xAxi
ECharts的讲解
weixin_62268437的博客
08-11 2万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
Echarts
小白小白从不日别的博客
11-28 4万+
目录 1.1 什么是ECharts? 1.2 ECharts基本使用 1.3 ECharts标题组件 1.4 ECharts工具箱组件 1.5 ECharts弹窗组件 1.6 ECharts饼状图 1.7 ECharts航线图 更详细的教程请参考官方教程：Handbook - Apache ECharts 这里知识最简单的演示一下 1.1 什么是ECharts? ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设..
水利水电施工组织设计-南淝河施工组织设计方案
08-25
南淝河施工组织设计方案是针对南淝河流域特定水利水电项目所制定的详细实施方案。该设计方案旨在确保工程的顺利进行，满足工程质量和工期要求，同时最小化对环境和社会的影响。 【主要知识点】 1. **项目背景与...
建筑施工组织2021-南淝河施工组织设计方案.doc
05-19
施工组织设计是建筑工程施工前的一项重要准备工作，它涵盖了从项目启动到竣工验收的全过程，旨在确保工程的顺利进行，保证质量和安全。本篇文档中的施工组织设计主要涉及以下几个方面： 1. **编制依据**：设计图纸...
南淝河施工组织设计方案.doc
09-18
南淝河施工组织设计方案.doc
中铁十三局一公司跨南淝河大桥汇报材料PPT课件.pptx
10-26
【中铁十三局一公司跨南淝河大桥汇报材料PPT课件】的文档主要涵盖了两个核心知识点：客商查询和...在大型项目如跨南淝河大桥的建设中，精准的客商信息管理对于供应链的协调、合同执行以及财务结算等方面都至关重要。
南淝河水污染现状与可持续发展对策研究 (2006年)
05-11
南淝河是合肥市一条主要河流.日益严重的污染，降低了水体使用功能，制约了流域经济社会和环境的可持续发展.笔者在分析水环境现状的基础上，阐述了综合治理的几点措施.
echarts中y轴设置刻度_ECharts中y坐标轴刻度的属性
weixin_39669265的博客
12-21 2万+
坐标轴刻度作为直角坐标系中重要的组成部分，我们需要学会合理的设置坐标轴的刻度，本节列举了一些 ECharts 中 y 轴刻度的一些属性设置。如果您还不知道如何显示坐标轴刻度，不晓得怎么控制 y 轴刻度间隔，那么，本节内容会很好的帮到您。yAxis.axisTick | Object该属性 ECharts 的 y 轴刻度进行相关设置。yAxis.axisTick.show | boo...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
杜永康的博客
12-26 3万+
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //坐标轴刻度文字数据。symbol: ['none', 'arrow'], //坐标轴箭头 (可选'none' 'arrow' ['none','arrow'])
ECharts - 16.富文本标签
YYDataV的博客
05-27 2697
富文本标签 在许多地方（如图、轴的标签等）都可以使用富文本标签。例如： 其他一些例子：Map Labels,Pie Labels,Gauge. 原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。 echarts v3.7 以后，支持了富文本标签，能够： 定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、...
echarts系列：x轴与y轴详细配置说明
浪潮行舟_chenjin2136
03-08 4685
最近在做大屏的时候使用了5.2版本的echarts，遇到很多的echarts图表，现将常用的x轴与y轴配置列出来。xAxis与yAxis中有很多配置项，下面我以xAxis进行详解，yAxis参考xAxis即可。上述xAxis与yAxis中的配置项，其中也会含有很多属性，具体使用请参考一下内容。splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。splitLine： 坐标轴在 grid 区域中的分隔线设置。axisLabel：坐标轴刻度标签的相关设置。
echarts中y轴设置刻度_xAxis 配置
weixin_35801512的博客
03-04 1万+
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置，那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的样式。所以，在下面的内容中你会看到 y 坐标轴刻度线颜色的设置、类型的选择、阴影迷糊的大小等。yAxis.axisTick.lineStyle.colorColor对 y 轴刻度线的颜色的设置，默认取 ...
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
[毕业设计]VB Access就业指导与失业保险发放系统(源代码+论文撰写+答辩演示文稿).zip
最新发布
08-07
[毕业设计]VB Access就业指导与失业保险发放系统(源代码+论文撰写+答辩演示文稿)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值