ECharts 图表设置标记的大小 symbolSize 和获取标记的值

ECharts 是百度出品，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

慕课网 http://www.imooc.com/learn/687 上有学习视频，可快速上手。

公司之前开发的 webapp 中有用到 ECharts 图表，可是在两个问题上一直解决不了，查找了很多方法，官网的配置参数也找了个遍，花了很多时间终于解决了问题：

一、设置图表标记的大小

最终效果：

图中空心圆圈的大小可设置，根据官网配置项查询到，它属于标记大小。

数组 series 中其中一个对象的属性 symbolSize 的值

初始值为 4，我将其设置为了 14：

series: [

    {

        name: '综合评分',

        type: 'line',

        stack: '总量',

        data: [<volist name="list" id="vv">{$vv.score},</volist>],

        symbolSize: 14, // 图表的点的大小

        itemStyle: {

            normal: {

                color: '#03a1ea'

            }

        }

    }

]

二、获取图表标记的值

有时候，我们需要使用图表标记对应的值。也就是那个空心圆圈对应的值。

在我的项目中需求是这样：点击空心圆圈，在下方显示其对应的值(也就是最新综合评分的数值)。

myChart.on('click',function(params){

    $("#scroe").text(parseInt(params.value));

})

代码解释：

1. myChart 为初始化 echarts 时赋予的变量名：

var myChart = echarts.init(document.getElementById('main')); //main 为 echarts 图表所被限制的用于绘图的框

2. params 是函数变量名，params.value 相当于当前点击的圆圈的值。

3. parseInt 是将结果取整数。

获取结果如下：

ECharts 图表设置标记的大小 symbolSize 和获取标记的值的更多相关文章

echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
echarts 图表自适应外部盒子大小
项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化. 自适应窗口及盒子大小页面中有一个[放大.缩小]功能,及全屏展示和预览图表窗口自适应 let m ...
解决.Net设置只读、隐藏后后台获取不到值的问题
在前台页面上放了几个textbox,用 ReadOnly=true设置不可编辑,用visible="False"设置不可见用jquery给textbox赋值后在后台页面获取不到t ...
echarts图表初始大小问题及echarts随窗口变化自适应
最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是不知道大 ...
element-ui升级笔记；echarts图表100px问题
1.element-ui的2.7以后的版本支持树形table结构的数据,考虑优化一下表格,就升级了,但是升级到最新的版本2.12发现table都出不来了,于是降级到2.7.目前功能正常,2.12的bu ...
Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例
因为我修改 ro.sf.lcd_density的值,将它从160修改为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...
echarts 如何设置热力图点的大小
series: [{ name: 'AQI', type: 'heatmap', coordinateSystem: 'geo', blurSize: 10, pointSize: 10, // 设置 ...
mui在tab选项卡中echarts图表不能动态随页面变化大小只能固定大小
在mui tab选项卡中一直都不能让echarts动态变化大小只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...
echarts图表x，y轴的设置
https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...

随机推荐

自定义ContentTypeHandler在struts2-rest-2.3.16.2不生效
需要使用自定义的ContentHandler格式化json中的时间类型为指定模式. 在struts.xml中增加了自定义的ContentHandler,但不会生效. http://blog.csdn. ...
js中进行金额计算
js中进行金额计算parseFloat 在js中进行以元为单位进行金额计算时使用parseFloat会产生精度问题var price = 10.99;var quantity = 7;var n ...
武汉邀请赛 Key Logger 双向链表
Key Logger Time Limit: 3000ms Case Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO form ...
JDBC入门（1）—— 入门案例
JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组 ...
军事机密(Secret.pas)
军事机密(Secret.pas) [问题描述] 军方截获的信息由n(n<=30000)个数字组成,因为是敌国的高端秘密,所以一时不能破获.最原始的想法就是对这n个数进行小到大排序, ...
PHP开发支付宝之电脑网站支付--流程简介
前言前端时间自己开发了一个drupal的支付宝模块,现在整理一下过程,因为支付宝官方网站提供的接口及文档都是新接口的,而且使用新接口的过程比较麻烦一点,所以整理一下 1.支付宝的账号必须经过企业资格 ...
Web开发须知的浏览器内幕缓存与存储篇（1）
本文禁止转载,由UC浏览器内部出品. 0.前言大纲浏览器缓存和存储相关的功能分为四类: 加载流程 Memory Cache Application Cache(简称AppCache) HTTP C ...
【javascript】javascript设计模式mixin模式
概述: Mixin是JavaScript中用的最普遍的模式,几乎所有流行类库都会有Mixin的实现.任意一个对象的全部或部分属性拷贝到另一个对象上. 一 .混合对象二 .混合类
Wasserstein GAN
在GAN的相关研究如火如荼甚至可以说是泛滥的今天,一篇新鲜出炉的arXiv论文<Wasserstein GAN>却在Reddit的Machine Learning频道火了,连Goodfel ...
Linux时间同步＋国内常用的NTP服务器地址
当Linux服务需要时间戳的时候,时间同步就显得十分重要.这里介绍下,最近我使用的一个同步命令. # ntpdate s1a.time.edu.cn 国内常用的NTP地址 210.72.145.44 ...

ECharts 图表设置标记的大小 symbolSize 和获取标记的值

ECharts 图表设置标记的大小 symbolSize 和获取标记的值的更多相关文章

随机推荐

热门专题