echarts 单选legend 并排序

一、legend 单选设置:

   legend : {

        data : [‘周末双休‘, ‘周末轮休‘, ‘周末补休‘],

        selected : {

            ‘周末轮休‘ : false,

            ‘周末补休‘ : false

        },

        selectedMode : "single"

    }

二、排序

有 arry1, arry2, arry3

series : [{

            name : ‘周末双休‘,

            type : ‘bar‘,

            itemStyle : dataStyle,

            data : (function () {

                var data = [];

                arry1.sort(function(a,b){

                                  if(a>b)

                                    return -1;      //降序

                                  else

                                   return 1;

                                })

                arry1.forEach(function (item) {

                    data.push(parseInt(item))

                })

                return data;

            })()

        }, {

            name : ‘周末轮休‘,

            type : ‘bar‘,

            itemStyle : dataStyle,

            data : (function () {

                var data = [];

                arry2.sort(function(a,b){

                  if(a>b)

                    return -1;

                  else

                   return 1;

                })

                arry2.forEach(function (item) {

                    data.push(parseInt(item))

                })

                return data;

            })()

        }, {

            name : ‘周末不修‘,

            type : ‘bar‘,

            itemStyle : dataStyle,

            data : (function () {

                var data = [];

                arry3.sort(function(a,b){

                      if(a>b)

                        return -1;

                      else

                       return  1;

                    })

                arry3.forEach(function (item) {

                    data.push(parseInt(item))

                })

                return data;

            })()

        }

    ]

时间: 2024-12-20 10:08:43

echarts 单选legend 并排序的相关文章

echart 单选legend 并排序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts</title> </head> <body> <h1>Echarts 3</h1> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style=&

Js + echarts - Pie legend 位置调整和值添加

var drawPieChart=function(chartId,titleText){ var chartData=[ {value:335, name:'原因1',trend:'up'}, {value:310, name:'原因2',trend:'up'}, {value:234, name:'原因3',trend:'dw'}, {value:135, name:'原因4',trend:'dw'}, {value:1548, name:'原因5',trend:'eq'} ] var op

Echarts (option.legend) 图例的属性,外部控制图例的select状态,以达到模拟图例的效果

先列举一些常用的属性: legend: { //图例,这里基本都是默认设置,就不一一列举,echarts 官网很好找 type: "plain", //'plain':普通图例.缺省就是普通图例.'scroll':可滚动翻页的图例.当图例数量较多时可以使用. show: true, //是否显示(隐藏和显示)柱子的那个按钮,默认true,如果不需要可以设置为false.如果没有请忽略. selectedMode: true, //图例上的点击事件,不写默认true ,设置false为不

echarts中 legend 自定义方法和单独定义每个图例的样式和宽高

单独定义echarts中每个图例的样式,自定义图例的点击方法 //用不同样式的图例用数组写对应图例的样式                legend:[{                    top: "15%",                    right: "24%",                    textStyle: {                        color: "#3BAEFE",          

实现echarts的legend属性设置

通过设置 legend 属性进行控制 参考文章: https://blog.csdn.net/xxtnt/article/details/96114386 原文地址:https://www.cnblogs.com/pxjbk/p/12155988.html

ECharts入门学习教程

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.这里给大家讲解两个案例带大家入门ECharts. 入门 Demo 01 如下面 demo 展示,我们尝试插入一个简单的柱形图: 下载 ECharts ,由于是初学,随便下什么版本.然后像普通引入外部

EasyUI、Struts2、Hibernate、spring 框架整合

经历了四个月的学习,中间过程曲折离奇,好在坚持下来了,也到了最后框架的整合中间过程也只有自己能体会了. 接下来开始说一下整合中的问题和技巧: 1,  jar包导入 c3p0(2个).jdbc(1个).spring(15个).Hibernate(10个).Struts2(13个).json(3个) 及EasyUI的jquery包 2, 在src目录下新建一个实体类的包,并新建一个实体类 package com.han.entity; import java.util.Date; public cl

JavasScript实现调查问卷插件

鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来与各程序员共享,聊以自慰. 前台代码如下: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Aim.Examining.Web.SurveyUI.Web

echarts中的option.legend.data has not been defined.

1.错误描述 2.错误原因 var map = function(mapData){ require( [ 'echarts', 'echarts/chart/map' ], function (ec) { var mapChart = ec.init(document.getElementById('mapDataChart')); var option = { title : { text: '', x : 'center', y : 'top' }, tooltip : { trigger