echarts的图例的图形的颜色怎么改变?

echarts的图例的图形的颜色怎么改变?我的一直是灰色的 然后hover滑过时 就变成了和
下面柱形图一直的颜色;我不需要hover,只需要它没有hover的时候也和柱形图的颜色保持一致
图片说明
图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts-all.js"></script>
    <style>
        .aaa{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="aaa" id="annular"></div>
<script>
    var aaa = echarts.init(document.getElementById('annular'));
    option = {
        title: {
            x: 'center',
            text: 'ECharts例子个数统计'
        },
        tooltip: {
            trigger: 'item'
        },
        legend:{
            //selectedMode: false,
            x:'right',
            y:70,
            align:'right',
            itemWidth:16,
            itemGap:20,
            orient:'vertical',
            data:[{name:'消费贷',textStyle:{color:'#C1232B'}},
                   {name:'现金贷',textStyle:{color:'#B5C334'}},
                   {name:'教育贷',textStyle:{color:'#FCCE10'}}
            ],
            selected:{
                '消费贷':true,
                '现金贷':true,
                '教育贷':true
            }
        },
        color:['#C1232B','#B5C334','#FCCE10'],
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['消费贷', '现金贷', '教育贷']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: 'ECharts例子个数统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [12,21,10],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)'
                    },
                    data: [
                        {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol:'none'},
                        {xAxis:1, y: 350, name:'Bar', symbolSize:20,symbol:'none'},
                        {xAxis:2, y: 350, name:'Scatter', symbolSize:20,symbol:'none'}
                    ]
                }
            }
        ]
    };
    aaa.setOption(option);
</script>
</body>
</html>

6个回答

先和你说一下问题在哪里吧 ,系统默认就是legend的颜色和条形的颜色一样的,不过前提条件是你的series 数据的name 属性和legend的 data数组一一对应.这里你的series 只有一个数组 ,需要分成三列才能正确的显示legend ,所以你这个配置有一些问题 ,如果真的想按自己的方式生成图形的话,有一个
D3.js提供一个工具集,可以自己自由绘制图形.

option = {
        title: { x: 'center', text: 'ECharts例子个数统计' },
        tooltip: { trigger: 'item' },
        legend: {
            selectedMode: false,
            orient: 'vertical',
            data: ['消费贷','现金贷','教育贷'],
        },
        color: ['#C1232B', '#B5C334', '#FCCE10'],
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        grid: { borderWidth: 0, y: 80, y2: 60 },
        xAxis: [
        { type: 'category',
        show: false,
        data: ['消费贷', '现金贷', '教育贷'] }],
        yAxis: [{ type: 'value', show: false }],
        series: [{
            name: '消费贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [12,null,null],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        },{
            name: '现金贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [null, 21, ],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        },
        {
            name: '教育贷',
            type: 'bar',
            barWidth:40,
            itemStyle: {
                normal: {
                    color: function(params) { // build a color map as your need. 
                        var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'];
                        return colorList[params.dataIndex]
                    },
                    label: { show: true, position: 'top', formatter: '{b}\n{c}' }
                }
            },
            data: [null,null, 10],
            markPoint: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0)' }, data: [{ xAxis: 0, y: 350, name: 'Line', symbolSize: 20, symbol: 'none' }, { xAxis: 1, y: 350, name: 'Bar', symbolSize: 20, symbol: 'none' }, { xAxis: 2, y: 350, name: 'Scatter', symbolSize: 20, symbol: 'none' }] }
        }
        ]
    };

试着把你的series拆一下

 series: [
            {
                name: '消费贷',
                type: 'bar',
                data: [12]
            },
            {
                name: '现金贷',
                type: 'bar',
                data: [21]
            },
            {
                name: '教育贷',
                type: 'bar',
                data: [10]
            }
        ]

你的图呢??你说的图例是指哪个? tooltip? bar? 还是其他的

Sxd0208
Sxd0208 回复当作看不见: 恩恩 好的
大约 3 年之前 回复
qq_29594393
当作看不见 回复Sxd0208: 这个默认就是有颜色的....legend 可以用来点击,筛选数据用的,我发个例子,你改改
大约 3 年之前 回复
Sxd0208
Sxd0208 我更新问题 把图传上去了 我说的图例是legend。那个legend的字搞定了就是它字后面的那个图的颜色弄不出来
大约 3 年之前 回复

难道legend不是默认和柱状图对应的颜色一样?
把你这段echarts配置的代码贴出来吧,不然也不好找问题

Sxd0208
Sxd0208 我把代码贴出来了
大约 3 年之前 回复

series 数据的name 属性和legend的 data数组要一一对应!!!我就是没有对应上name。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts如何将两个相同的图例合并到一起

我用echarts做了两个图,两个图的数据不同,但是两个图的legend是一模一样的,正常的话会出现两个一模一样的图例,但是我想实现只显示一个图例,点击的话两个图都会出现变化,也就是说将两个图例变成一个,各位大佬有么有什么好方法

Echarts地图中点击新图例如何清除之前的图层

目前有一个需求,有多个图例的地图,如何通过点击其中一个图例只让在地图上显示这个图例所在的数据啊?例如官网这个例子http://echarts.baidu.com/echarts2/doc/example/map1.html,点iphone4的时候,其他两个图例不要显示在地图上。小弟新手,有代码说明更好。

echarts地图,需要省份颜色显示五种颜色,同一色系深浅不同

echarts地图,需要省份颜色显示五种颜色,同一色系深浅不同。不是太懂echarts。。

Echarts的legend的上如何显示一个数的数值?

查了很多,网上有人说如果需要formatter特殊的内容,通过名字从你自己的option里取,有哪位高手知道怎么做吗?快被这个逼疯了

怎么实现echarts饼形图label字体两种颜色?

![图片说明](https://img-ask.csdn.net/upload/201706/08/1496915461_340359.png) 想用echarts做成这个效果。。夸何百分数与下方文字怎么都是一种颜色。。有什么办法可以设置成不同颜色可以吗?

echarts怎么按不同颜色绘制地类图斑?

地类图斑是一个用shp生成的geojson文件,但是没有name字段,json一段如下: ``` "type":"FeatureCollection", "features": [ {"type":"Feature","geometry": { "type":"Polygon", "coordinates":[[[37……,……],……,[……,……]]]}, "properties":{ "BSM":……,"YSDM":"……","TBYBH":"","TBBH":"……","DLBM":"022","DLMC":"茶园","QSXZ":"30","QSDWDM":"……", "QSDWMC":"","ZLDWDM":"……","ZLDWMC":"某某村","GDLX":"","KCLX":"","KCDLBM":"","TKXS":0,"TBMJ":……, "XZDWMJ":……,"LXDWMJ":0,"TKMJ":0,"TBDLMJ":……,"PZWH":"","BGJLH":"","BGRQ":"……","DLBZ":"","GDPDJ":"", "SHAPE_Leng":……,"SHAPE_Area":……} } ``` 我想要按照这里面的地类编码把每一个feature用不同的颜色标识出来该怎么做?我现在已生成图像如下![图片说明](https://img-ask.csdn.net/upload/201908/20/1566308650_492825.png)

请问一下echarts的折现图怎么能旋转一下

![图片说明](https://img-ask.csdn.net/upload/202004/10/1586504833_833807.png) 这是正常的折线图,我想让x轴和y轴换一下 ![图片说明](https://img-ask.csdn.net/upload/202004/10/1586504813_932085.png) 换成这样的,但是数据还是像上面的一样对应 请问大佬们,怎么旋转一下?

echarts legend分页点击不起效

1.我采用echarts进行图表展示,因为lengend比较多,空间比较小,就采用legend分页展示; ``` legend: { type: 'scroll', x: 'center', bottom: 22, data: that.visitCatalog.name, tooltip: { show: true } }, ``` 分页效果出来了! 但是因为第一个图例的描述文字比较长,占用空间超出了一页,造成了点击右箭头不能切换到第二页的问题。 请问怎么解决

echarts折线图设置title背景色无效?

使用echarts折线图,给title设置样式的时候,发现backgroundColor不起作用,不知道是哪里出了问题,希望熟悉echarts的大牛能指点下,不胜感激! 我的代码效果图如下: ![图片说明](https://img-ask.csdn.net/upload/201912/18/1576638105_803105.png) 想要实现的是箭头所指部分给加一个背景色,参考文档: https://www.echartsjs.com/zh/option.html#title.backgroundColor 我的配置项如下: ``` areaOption: { title: { text:'今天活动签到0人;昨天活动签到 100人', backgroundColor:'#649FFF', show:true, left: 'right',//这个太神奇了,设置标题居中的. padding:20, textStyle: { fontSize: 12, align: 'center', }, }, legend: { // 图例 data: ['正在举办的活动场数', '当天线上签到人数',] show:true, padding:20, left:20, data: [ { name:'正在举办的活动场数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, { name: '当天线上签到人数', icon:'circle', textStyle:{ color:'#666666', fontSize: 12, } }, ] }, grid: { top: 60, right: 40, bottom: 20, left: 50, containLabel: true }, tooltip: { trigger: 'axis',//坐标轴触发 snap: true, //坐标轴指示器是否自动吸附到点上 confine: true,//是否将 tooltip 框限制在图表的区域内 axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985', shadowColor: '#42515d', formatter: '{value}' //显示x轴的值 }, }, //formatter: "{value}<br/> {a0} <br/>{b} : {c}次" }, xAxis: [ { type: 'category', boundaryGap: false, // data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] data: [], axisLabel: {//刻度相关 interval: 0, rotate: 45, } } ], yAxis: [ { type: 'value', name: "正\n在\n举\n办\n的\n活\n动\n场\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 axisLabel: { formatter: function (v) { return parseInt(v); //0表示小数为0位,1表示1位小数,2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, }, { type: 'value', name: "当\n天\n线\n上\n签\n到\n人\n数", nameLocation: "center", nameGap: 35, nameRotate: 0, nameTextStyle: { fontSize: 16, }, splitLine: { show: true, lineStyle:{ type:'dotted', opacity:0.2 }, }, minInterval: 1, axisLabel: { formatter: function (v) { return v.toFixed(0); //0表示小数为0位,1表示1位小数,2表示2位小数 } }, axisPointer: { show: true, label: { show: true, precision: 0 //这个用来控制y轴小数点精度 } }, } ], series: [ { name: '正在举办的活动场数', type: 'line', // smooth: true, yAxisIndex: 1, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[16,16,6,5,4,4,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, //color: ['#E04445'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#649FFF' // 0% 处的颜色 }, { offset: 1, color: '#649fff' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, // clip:false }, { name: '当天线上签到人数', type: 'line', // smooth: true, yAxisIndex: 0, areaStyle: {normal: {opacity: 0.2}},//设置透明度 data: [], // data:[35,15,8,12,11,6,3,0,0,0,0,0], itemStyle: {normal: {label: {show: true}}}, // color: ['#649FFF'], color: [ { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#E04445' // 0% 处的颜色 }, { offset: 1, color: '#ff494a' // 100% 处的颜色 }], globalCoord: true // 缺省为 false } ], connectNulls: true, } ] }, ```

Echarts图表响应式问题

最近刚开始接触Echarts可视化图标,使用的是bootstrap框架。bootstrap框架做出来的是响应式页面,但是发现Echarts的图表并不随之变化。最后在网上找到了几个方法。但是发现无论怎调整页面大小,图标依然是宽400px,高300px,故来求援,到底怎么才能让图表响应式变化 ``` <body> <div id="main" style="width: 400px; height: 300px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //window.onresize = myChart.resize;(行不通) window.addEventListener('resize',function(){ myChart.resize(); });(还是行不通) </script> </body> ``` 发现无论怎调整页面大小,图标依然是宽400px,高300px

echarts的折线图纵横问题

echarts的折线图的纵横坐标怎么转换,背景颜色怎么按分段显示,不同阶段不同颜色

用Echarts制作饼图没有显示。

用Echarts制作饼图没有显示,pie页面代码如下: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <title>饼图例子</title> </head> <body> <div id="mainChart" style="width: 600px;height:400px;"> </div> <script type="text/javascript"> //使用ajax加载数据 $.ajax({ method : 'post', url : 'pie', dataType : 'json', success : function(data) {//data格式:[{name:nameValue,value:valueVal},...] initChat(data); } }); function initChat(data) { var myChart = echarts.init(document.getElementById('mainChart')); option = { backgroundColor: '#cccccc', color:["#D53A35","#296294"], title : { text : '用户性别聚合分析', x : 'center' }, tooltip : { trigger : 'item', formatter : "{a} <br/>{b} : {c} ({d}%)" }, legend : { orient : 'vertical', left : 'left', data : formatData(data).xAxData }, series : [ { name : '男女数量', type : 'pie', radius : '55%', center : [ '50%', '60%' ], color:['#297ca3','#c35b3b'], data : formatData(data).serData, itemStyle : { emphasis : { shadowBlur : 10, shadowOffsetX : 0, shadowColor : 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option, true); }; function formatData(data) { var xAxData = []; var serData = []; for (var i = 0; i < data.length; i++) { xAxData.push(data[i].name || ""); serData.push({ name : data[i].name, value : data[i].value || 0 }); } return { xAxData : xAxData, serData : serData }; }; </script> </body> </html> ``` 我把这篇代码删掉,只输出个字符串,是可以显示的,把这个代码放上就不行了,我感觉应该是这篇代码的问题,我把Controller的代码放在下面: ``` package com.ssh.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class EchartsController { @RequestMapping("/topie") public String toPie(){ return "pie"; } @RequestMapping(value="pie",method= RequestMethod.POST) @ResponseBody //处理的是异步请求,并且响应的结果是json格式 public List<Map<String, Object>> getPieData() { List<Map<String, Object>> data = new ArrayList<>(); Map<String, Object> map = new HashMap<String, Object>(); map.put("name", "男"); map.put("value", "20"); data.add(map); map = new HashMap<String, Object>(); map.put("name", "女"); map.put("value", "30"); data.add(map); return data; } } ``` 找了很久,也没找到问题,求大神帮助!!!! 我的项目目录如下: ![图片说明](https://img-ask.csdn.net/upload/201912/28/1577517453_218697.png) 问题已解决: 应该是js文件没有引入,我开始调了很长时间都没有用,js那删了改 改了删 但最后还是和现在代码一样,但是可以显示了,昨天弄了很久都没弄出来,哎,具体原因,为什么会这样,我也不是很清楚,有懂得大神吗,求解答 结果现在是这样这样的 ![图片说明](https://img-ask.csdn.net/upload/201912/29/1577592792_561495.png)

前端tab中echarts饼状图无法点击的问题

最近在使用echarts开发项目,正常来说,饼状图在点击其中一份时,会有向外突出的效果,如下: ![图片说明](https://img-ask.csdn.net/upload/202003/20/1584698357_118714.png) 图中点击了红色部分,如果设置上tooltip后则可以进行显示; <br> 但是现在我使用了tab栏进行切换后,只有第一个饼状图有这种点击效果,后面的没有这种点击效果,请问有哪位大神遇到过类似情况吗?万分感谢! 我的页面是设置了很多个div中包裹着图标,当tab栏按下时的tab的值会决定哪个div被显示出来;

echarts值已经给data了就是不显示效果

$(document).ready(function () { console.log("不是缓存,jquery加载"); function setOption(datas) { var myChart = echarts.init(document.getElementById('china-map')); var option = { title: { text: '', subtext: '', x: 'center' }, tooltip: {//提示框组件。 trigger: 'item'//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 }, legend: { orient: 'horizontal',//图例的排列方向 x: 'left',//图例的位置 data: ['全国分布'] }, visualMap: {//颜色的设置 dataRange x: 'left', y: 'center', splitList: [ {start: 1500}, {start: 900, end: 1500}, {start: 310, end: 1000}, {start: 200, end: 300}, {start: 10, end: 200, label: '10 到 200(自定义label)'}, {start: 5, end: 5, label: '5(自定义特殊颜色)', color: 'black'}, {end: 10} ], // min: 0, // max: 2500, // calculable : true,//颜色呈条状 text: ['客流量高', '客流量低'],// 文本,默认为数值文本 color: ['#E0022B', '#E09107', '#A3E00B'] }, toolbox: {//工具栏 show: true, orient: 'vertical',//工具栏 icon 的布局朝向 x: 'right', y: 'center', feature: {//各工具配置项。 mark: {show: true}, dataView: {show: true, readOnly: false},//数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。 restore: {show: true},//配置项还原。 saveAsImage: {show: true}//保存为图片。 } }, roamController: {//控制地图的上下左右放大缩小 图上没有显示 show: true, x: 'right', mapTypeControl: { 'china': true } }, series: [ { name: '订单量', type: 'map', mapType: 'china', roam: false,//是否开启鼠标缩放和平移漫游 itemStyle: {//地图区域的多边形 图形样式 normal: {//是图形在默认状态下的样式 label: { show: true,//是否显示标签 textStyle: { color: "rgb(249, 249, 249)" } } }, emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时 label: {show: true} } }, top: "3%",//组件距离容器的距离 data: datas } ] }; console.log(option.series[0].data[0].value); } myChart.setOption(option); var datas = []; function getMapData() { $.ajax({ type: "post", url: "${link.contextPath}/shops/selectShopMap", dataType: "json", success: function (result) { if (result) { console.log(result); for (var i = 0; i < result.length; i++) { var sname = result[i].name; var svalue = result[i].value; var datashop = {name: sname, value: svalue} datas.push(datashop); } console.log(datas); setOption(datas);//执行setOption函数。传参 /* myChart.setOption({ series: [{ data: datas }], });*/ } }, error: function () { alert("错误"); myChart.hideLoading(); } }); myChart.on('mouseover', function (params) { var dataIndex = params.dataIndex; console.log(params); }); } getMapData(); }) ![图片说明](https://img-ask.csdn.net/upload/201812/29/1546069892_358309.png) console.log(option.series[0].data[0].value); ![图片说明](https://img-ask.csdn.net/upload/201812/29/1546070027_782008.png) ![图片说明](https://img-ask.csdn.net/upload/201812/29/1546069909_163759.png)

echarts 和 swiper 一起使用时echarts的点击事件无效?

我将echarts和swiper 一起使用时,echarts的点击事件就无效了。百度搜索说 swiper将页面拷贝了多份,但没拷贝点击事件,那这个点击事件该怎么注册进去呢? 代码如下: ``` <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div id="my" style="width: 100%; height: 90vh"></div> </div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="swiper.min.js"></script> <script type="text/javascript" src="echarts.min-4.2.0.js"></script> <script type="text/javascript"> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }); var echars = echarts.init(document.getElementById("my")); option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ { name:'访问来源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; echars.setOption(option); echars.on('click', function (params) { alert("1"); }) </script> </body> ```

ggplot2中的multiple plots如何添加颜色图例

最近跟着好大学的慕课学习ggplot2,在line plots的multiple plots中,没有提到如何添加颜色标识,想向各位请教一下。 代码是一个折线图的示例 ``` eu<-as.data.frame(EuStockMarkets) stocks<-ggplot() +geom_line(data=eu,aes(x=time,y=DAX),size=1,color="light blue") +geom_line(data=eu,aes(x=time,y=SMI),size=1,color="red") +geom_line(data=eu,aes(x=time,y=CAC),size=1,color="yellow") +geom_line(data=eu,aes(x=time,y=FTSE),size=1,color="green") +labs(x="Time",y="Stocks") print(stocks) ``` ![图片说明](https://img-ask.csdn.net/upload/201908/14/1565750594_465638.png) 如图,想在图上添加颜色图例说明每个颜色分别代表什么,希望各位有时间能为我解答困惑,谢谢!

echarts如何实现宽度自适应

echarts宽度自适应 如果不设定宽度,报表无法显示?为什么?求高手指点

echarts中可以使用icon图标嘛?怎么使用?

echarts在formatter中可以设置图片格式的背景, 但是如果我想用weatherIcons或者bootstrap的glyphicons这些小图标的话 要怎么写呢?可以写嘛?有木有知道的 求解求解~~

echarts,折线图legend样式怎么改?

图表出来后出来两个legend,右边的这个应该不是,但是不知道是什么组件。 请求各位大神帮助,怎么隐藏,或者修改样式!谢谢! ![图片说明](https://img-ask.csdn.net/upload/202004/08/1586340037_199666.jpg)

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

String s = new String(" a ") 到底产生几个对象?

老生常谈的一个梗,到2020了还在争论,你们一天天的,哎哎哎,我不是针对你一个,我是说在座的各位都是人才! 上图红色的这3个箭头,对于通过new产生一个字符串(”宜春”)时,会先去常量池中查找是否已经有了”宜春”对象,如果没有则在常量池中创建一个此字符串对象,然后堆中再创建一个常量池中此”宜春”对象的拷贝对象。 也就是说准确答案是产生了一个或两个对象,如果常量池中原来没有 ”宜春” ,就是两个。...

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

Linux面试题(2020最新版)

文章目录Linux 概述什么是LinuxUnix和Linux有什么区别?什么是 Linux 内核?Linux的基本组件是什么?Linux 的体系结构BASH和DOS之间的基本区别是什么?Linux 开机启动过程?Linux系统缺省的运行级别?Linux 使用的进程间通信方式?Linux 有哪些系统日志文件?Linux系统安装多个桌面环境有帮助吗?什么是交换空间?什么是root帐户什么是LILO?什...

Linux命令学习神器!命令看不懂直接给你解释!

大家都知道,Linux 系统有非常多的命令,而且每个命令又有非常多的用法,想要全部记住所有命令的所有用法,恐怕是一件不可能完成的任务。 一般情况下,我们学习一个命令时,要么直接百度去搜索它的用法,要么就直接用 man 命令去查看守冗长的帮助手册。这两个都可以实现我们的目标,但有没有更简便的方式呢? 答案是必须有的!今天给大家推荐一款有趣而实用学习神器 — kmdr,让你解锁 Linux 学习新姿势...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

史上最全的 python 基础知识汇总篇,没有比这再全面的了,建议收藏

网友们有福了,小编终于把基础篇的内容全部涉略了一遍,这是一篇关于基础知识的汇总的文章,请朋友们收下,不用客气,不过文章篇幅肯能会有点长,耐心阅读吧爬虫(七十)多进程multiproces...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

85后蒋凡:28岁实现财务自由、34岁成为阿里万亿电商帝国双掌门,他的人生底层逻辑是什么?...

蒋凡是何许人也? 2017年12月27日,在入职4年时间里,蒋凡开挂般坐上了淘宝总裁位置。 为此,时任阿里CEO张勇在任命书中力赞: 蒋凡加入阿里,始终保持创业者的冲劲,有敏锐的...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

新一代神器STM32CubeMonitor介绍、下载、安装和使用教程

关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang最近ST官网悄悄新上线了一款比较强大的工具:STM32CubeMonitor V1.0.0。经过我研究和使用之...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

大学一路走来,学习互联网全靠这几个网站,最终拿下了一把offer

大佬原来都是这样炼成的

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

为什么你不想学习?只想玩?人是如何一步一步废掉的

不知道是不是只有我这样子,还是你们也有过类似的经历。 上学的时候总有很多光辉历史,学年名列前茅,或者单科目大佬,但是虽然慢慢地长大了,你开始懈怠了,开始废掉了。。。 什么?你说不知道具体的情况是怎么样的? 我来告诉你: 你常常潜意识里或者心理觉得,自己真正的生活或者奋斗还没有开始。总是幻想着自己还拥有大把时间,还有无限的可能,自己还能逆风翻盘,只不是自己还没开始罢了,自己以后肯定会变得特别厉害...

什么时候跳槽,为什么离职,你想好了么?

都是出来打工的,多为自己着想

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

立即提问
相关内容推荐