Apache ECharts 开箱使用

谁借莪１个温暖的怀抱￠ 2022-05-12 11:34 145阅读 0赞

#### 一、ECharts介绍 ####

ECharts是百度开源的纯 Javascript 图表库，它是 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底层基于 ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。

#### 二、ECharts实例 ####

版本 ECharts 3.0 v4.x

<script type="text/javascript"> var myChart1 = echarts.init(document.getElementById('main1'),'dark'); var option1 ={ backgroundColor: '#262D45', //提示框组件 tooltip: { trigger: 'axis', //坐标轴触发 axisPointer: { type: 'cross' }, //坐标轴指示器配置项(指示坐标轴当前刻度的工具) backgroundColor:'rgba(0,0,0,0.8)', //提示框浮层的背景颜色 textStyle: { //提示框浮层的文本样式 fontSize:42, lineHeight:64 } }, grid: { //grid组件离容器上下左右的距离(用百分比) right: '4%', left: '4%', bottom: '20%', top: '12%' }, legend: { //图例组件 itemGap: 100, //图例之间每项间的间隔 itemWidth: 40, //图例标记的图形宽度，高度 itemHeight: 24, padding:[20,0,0,0], //图例内边距，上右下左 textStyle: { //图例的公用文本样式 color: '#f1f1f1', fontSize: 42, fontWeight: 'normal' //问题字体的粗细 }, data:['Actual CT','UPH'] //图例的数据数组 }, xAxis : [ { type: 'category', //坐标轴类型 axisLine: { //坐标轴轴线相关设置 lineStyle: { color: '#f1f1f1', width: 2 } }, axisTick: { //坐标轴刻度相关设置 alignWithLabel: false, //为true时保证坐标轴和轴线对齐 length: 8, //坐标轴刻度的长度 lineStyle: { //坐标轴刻度线的相关设置 width: 2 } }, axisLabel: { //坐标轴刻度标签的相关设置 fontSize: 32, interval: 0, //设置成 0 强制显示所有标签 rotate: 20, //刻度标签旋转的角度 showMinLabel: true, //是否显示最小 tick 的 label showMaxLabel: true }, axisPointer: { // show: true, //设置成true显示 label: { show: true, //是否显示文本标签 color: '#fff', fontSize: 42, backgroundColor: '#000' } }, //X轴依次显示名字，值加单引号，值间逗号隔开 data : ['Install SubAssembly','P-TEST(SFC)','Pre-Burn', 'Install Camera','Install Rear Camera','Install Audio','MLB Install'] } ], yAxis : [ . . . ], series : [ . . . ] }; //为echarts对象加载数据 myChart1.setOption(option1); </script>

#### 三、ECharts操作 ####

**1. 给X轴添加点击事件（y轴同理）**

第一步：将xAxis或者yAxis的属性triggerEvent 置为 true;  
第二步：点击事件，如代码：

mybarDoubleChart.setOption(option);    
    mybarDoubleChart.on('click', function (params) {         
    	if(params.componentType == "xAxis"){             
    		alert("单击了"+params.value+"x轴标签");        
    	}else
    	{             
    		alert("单击了"+params.name+"柱状图");        
    	}    
    });

**2. 设置柱子的最大宽度和刻度的最小间隔**

*  问题1：柱子的颜色要各种颜色，而不是同一种颜色；
 *  问题2：在柱子数量少的时候，剩下的柱子不要太粗，否则不好看；
 *  问题3：实际上的统计信息，其数据都是整数，没有小数。所以希望图形中的刻度也不要出现小数；
 *  问题4：如果窗口大小变化，图表可以自动进行调整。

var curChart = echarts.init(document.getElementById(showDivId));
        // 初始化report对象
        curChart.setOption({ 
                title: { 
                    subtext: '单位:个',
                    subtextStyle: { 
                        "fontSize": 13,
                        "fontWeight": 'bolder',
                        "color": "#000000"
                    },
                    x: 'right',
                    y: 'top',
                },
                tooltip: { 
                    trigger: 'item',
                    axisPointer: { 
                        type: 'shadow'
                    }
                },
                grid: { 
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: { 
                    type: 'value',
                    boundaryGap: [0, 1],
                    min:0,
                    minInterval: 1 
                    //解决问题3：实际上的统计信息，其数据都是整数，没有小数，设置最小刻度
                },
                yAxis: { 
                    type: 'category',
                    data:[]
                },
                series: [
                    { 
                        type: 'bar',
                        barMaxWidth: '50',  //解决问题2：在柱子数量少的时候，剩下的
                        //柱子不要太粗，否则不好看，设置bar最大宽度
                        itemStyle: { 
                            normal: { 
                                color: function (params) { 
                                   //解决问题1：柱子的颜色要各种颜色，而不是同一种颜色
                                    var colorList = [
                                      '#C1232B', '#B5C334', '#FCCE10', '#E87C25',
                                       '#27727B', '#FE8463', '#9BCA63', '#FAD860', 
                                       '#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
                                        '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data: []
                    }
                ]
        });
        //根据窗口大小调整图表
        window.onresize = curChart.resize; 
        //解决问题4：如果窗口大小变化，图表可以自动进行调整

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 Layui模块化前端框架开箱使用

网：[经典模块化前端框架][Link 1] 一、快速上手 **1. 下载layui后引入两个文件到项目目录** ./layui/css/layui.cs...

浅浅的花香味﹌/ 2024年04月18日 08:04/ 0 赞/ 57 阅读

相关 Apache Echarts 自学笔记 4. 入门篇 - 【在项目中引入Apache Echarts】

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

た入场券/ 2024年03月27日 16:46/ 0 赞/ 70 阅读

相关 Apache Echarts 自学笔记 3. 入门篇 - 【获取Apache Echarts】

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

ゝ一世哀愁。/ 2024年03月27日 16:46/ 0 赞/ 61 阅读

相关 Apache Echarts 自学笔记 1. Echarts简介

Apache Echarts 自学笔记 > 学习资料：【Echarts官网：https://echarts.apache.org/】 > > ![在这里插入图片描述][

悠悠/ 2024年03月27日 15:41/ 0 赞/ 48 阅读

相关 Vue 项目中使用Apache ECharts 生成可视化图表库

步骤：第一步：通过： NPM 安装 ECharts； npm install echarts --save 第二步：在 vu

蔚落/ 2023年10月04日 20:47/ 0 赞/ 39 阅读

相关 Vue中使用websocket(开箱即用)

<template> <div class="test"> </div> </template> <script>

淩亂°似流年/ 2022年12月03日 11:30/ 0 赞/ 143 阅读

相关 echart仪表盘旋转_使用echart仪表盘

温度仪表盘 window.οnlοad=function()\{varmyChart=echarts.init(document.getElementById('temper

你的名字/ 2022年10月31日 01:34/ 0 赞/ 304 阅读

相关 echart使用

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>折线图</title> <sc

落日映苍穹つ/ 2022年08月07日 08:49/ 0 赞/ 186 阅读

相关 Apache ECharts 开箱使用

一、ECharts介绍 ECharts是百度开源的纯 Javascript 图表库，它是 Enterprise Charts（商业产品图表库），提供商业产品常用图表库，底

谁借莪１个温暖的怀抱￠/ 2022年05月12日 11:34/ 0 赞/ 146 阅读

相关 Echart使用

一五分钟入门ECharts 1 简介 ECahrs是百度的一个项目，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据

我会带着你远行/ 2021年07月24日 16:04/ 0 赞/ 590 阅读