博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ECharts 学习笔记
阅读量:7210 次
发布时间:2019-06-29

本文共 4180 字,大约阅读时间需要 13 分钟。

ECharts添加点击事件(基于饼图):

var option = {    ...}myChart.setOption(option);myChart.on('click', function eConsole(param) { //添加点击事件 ,param输出被点击对象,包含被点击元素许多信息    var name = param.name;    location.href = 'chuchai/work-online.html#' + name;});复制代码

修改label文本类型(显示value的值):

option = {	title: {		show: false,		subtext: tit,		x: 'right'		},	tooltip: {		trigger: 'item',		formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'right', top: 'bottom' data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, color: ['#3aa1ff', '#36cbcb', '#4ecb73', '#fbd437', '#f2637b', '#975fe5', '#5254cf', '#435188'], series: [{ name: '', type: 'pie', radius: '88%', center: ['30%', '50%'], data: da, label: { //饼图图形上的文本标签 normal: { show: true, position: 'inner', //标签的位置 textStyle: { fontWeight: 300, fontSize: 14 //文字的字体大小 }, formatter: '{c}' } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] };复制代码

可惜没有找到调整label文本位置的配置项。

dataset的使用:

$.get('data/asset/data/life-expectancy-table.json', function (data) {    var sizeValue = '57%';    var symbolSize = 2.5;    option = {        legend: {},        tooltip: {},        toolbox: {            left: 'center',            feature: {                dataZoom: {}            }        },        grid: [            {
right: sizeValue, bottom: sizeValue}, {
left: sizeValue, bottom: sizeValue}, {
right: sizeValue, top: sizeValue}, {
left: sizeValue, top: sizeValue} ], xAxis: [ {
type: 'value', gridIndex: 0, name: 'Income', axisLabel: {
rotate: 50, interval: 0}}, {
type: 'category', gridIndex: 1, name: 'Country', boundaryGap: false, axisLabel: {
rotate: 50, interval: 0}}, {
type: 'value', gridIndex: 2, name: 'Income', axisLabel: {
rotate: 50, interval: 0}}, {
type: 'value', gridIndex: 3, name: 'Life Expectancy', axisLabel: {
rotate: 50, interval: 0}} ], yAxis: [ {
type: 'category', gridIndex: 0, name: 'Country', boundaryGap: false, axisLabel: {
rotate: 50, interval: 0}}, {
type: 'value', gridIndex: 1, name: 'Income'}, {
type: 'value', gridIndex: 2, name: 'Population'}, {
type: 'value', gridIndex: 3, name: 'Population'} ], dataset: { dimensions: [ 'Income', 'Life Expectancy', 'Population', 'Country', {
name: 'Year', type: 'ordinal'} ], source: data }, series: [ { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 0, yAxisIndex: 0, encode: { x: 'Income', y: 'Country', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 1, yAxisIndex: 1, encode: { x: 'Country', y: 'Income', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 2, yAxisIndex: 2, encode: { x: 'Income', y: 'Population', tooltip: [0, 1, 2, 3, 4] } }, { type: 'scatter', symbolSize: symbolSize, xAxisIndex: 3, yAxisIndex: 3, encode: { x: 'Life Expectancy', y: 'Population', tooltip: [0, 1, 2, 3, 4] } } ] }; myChart.setOption(option);});复制代码

转载于:https://juejin.im/post/5ad0099bf265da239b41d6ce

你可能感兴趣的文章
各大厂分布式链路跟踪系统架构对比
查看>>
WSL与Windows交互实践
查看>>
《二叉树》学习心得
查看>>
【基础】CSS实现多重边框的5种方式
查看>>
Eclipse下把jar包放到工程lib下和通过buildpath加载有什么不同(解决找不到类的中级方法)...
查看>>
gradle新建工程,多项目依赖,聚合工程
查看>>
变量命名神器Codelf
查看>>
iBase4J部署总结
查看>>
IASetIndexBuffer Offset
查看>>
TeamLab安装及使用
查看>>
很安逸的离线API文档查询工具Dash和Zeal
查看>>
ICAP: 互换客户端地址协议
查看>>
Nginx-rtmp 直播媒体实时流实现
查看>>
C++ const 理解
查看>>
Linux进程管理 (7)实时调度
查看>>
基于鲁棒图进行概念架构设计
查看>>
Permission denied: exec of '/var/www/html/bugzilla/index.cgi' failed
查看>>
LESS CSS 框架简介与使用
查看>>
2014.09线上课堂报名帖:敏捷个人手机应用使用
查看>>
C# 重启exe
查看>>