echarts3.7.1 用例体验地图

nodejs + react

安装最新echarts ：npm install echarts

制定版本 npm install echarts@2.2.7-beta1

引入 reactes

import echarts from 'echarts';

引入地图

import china from '../../../node_modules/echarts/map/js/china'; 根据安装路径倒入

完整代码：

/*** Created by wangyan on 2017/2/22.*/
import React from "react";
import echarts from 'echarts';
import auth from "../common/auth.jsx";
import china from '../../../node_modules/echarts/map/js/china';
import param from '../../import/params.js';
import $ from "jquery";export default class Home extends React.Component {componentDidMount() {var dom = document.getElementById("main");var myChart = echarts.init(dom);// 自定义扩展图表类型：mapType = bodyrequire('echarts/util/mapData/params').params.baiduBuilding = {getGeoJson: function (callback) {$.ajax({url: "svg/baidu-building.svg",dataType: 'xml',success: function (xml) {callback(xml)}});}}option = {backgroundColor: '#eee',title: {text: '百度大厦',textStyle: {color: '#000'}},tooltip: {trigger: 'item',formatter: '{b}'},color: ['rgba(218, 70, 214, 1)', 'rgba(100, 149, 237, 1)', 'green'],legend: {data: ['嘿嘿', '高经', '会议室']},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: '嘿嘿',type: 'map',mapType: 'baiduBuilding',roam: true,itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: [],geoCoord: {'叮叮': [39, 45],'小兑儿': [71, 45],'胡瑶': [195, 29],'祖明': [195, 44],'林峰': [195, 60],'安晨': [210, 44],'功': [210, 60],'立新': [144, 59],'诗才': [195, 71],'黄競': [210, 59],'浪宇': [150, 55],'晓青': [210, 71],'毅楠': [222, 59],'朝霞': [222, 71],'武琦': [231, 71],'严萍': [231, 46],'绍波': [231, 59],'开放': [488, 43],'兵兵': [488, 60],'孟珂': [522, 43],'辉耀': [522, 60],'佳璐': [488, 23],'新乐': [522, 23],'大佛': [165, 29],'周玉': [165, 44],'令君': [165, 60],'佳璐': [165, 71],'erik': [222, 44],'爽哥': [240, 60],'雷哥': [240, 44],'坤哥': [176, 59],'刚哥': [176, 71],'高经': [545, 54],'邱华': [468, 23],'饥渴难耐的辉辉': [473, 40],'大发': [500, 40],'淼童': [473, 60],'亚江': [500, 60],'莉姐': [530, 70],'红启': [570, 54],'五福降中天': [373, 173],'csfe': [500, 54],'得胜令': [253, 179],'西湖春': [496, 179],'望江南': [72, 203],'庆千秋': [86, 203],'过江龙': [289, 32],'天下乐': [289, 50],'万年欢': [687, 24],'浣溪沙': [637, 203],'清平乐': [649, 203],'四和春': [663, 203],'杏花天': [676, 203]},markPoint: {symbolSize: 3,data: [{ name: '叮叮' },{ name: '小兑儿' },{ name: '胡瑶' },{ name: '高经' },{ name: 'erik' },{ name: '祖明' },{ name: '林峰' },{ name: '坤哥' },{ name: '刚哥' },{ name: '爽哥' },{ name: '雷哥' },{ name: '邱华' },{ name: '淼童' },{ name: '亚江' },{ name: '莉姐' },{ name: '大发' },{ name: '饥渴难耐的辉辉' },{ name: '红启' },{ name: '安晨' },{ name: '功' },{ name: '立新' },{ name: '诗才' },{ name: '黄競' },{ name: '晓青' },{ name: '毅楠' },{ name: '浪宇' },{ name: '朝霞' },{ name: '严萍' },{ name: '武琦' },{ name: '绍波' },{ name: '开放' },{ name: '兵兵' },{ name: '孟珂' },{ name: '辉耀' },{ name: '佳璐' },{ name: '新乐' },{ name: '周玉' },{ name: '令君' },{ name: '佳璐' }]},markLine: {smooth: true,effect: {show: true,scaleSize: 1,period: 20,color: '#fff',shadowBlur: 5},symbol: ['none'],itemStyle: {normal: {borderWidth: 1,lineStyle: {type: 'solid'}}},data: [[{ name: 'erik' },{ name: '胡瑶' }],[{ name: '祖明' },{ name: '叮叮' }],[{ name: '祖明' },{ name: '小兑儿' }]]}},{name: '高经',type: 'map',mapType: 'baiduBuilding',roam: true,symbol: ['none'],itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: [],markLine: {smooth: true,effect: {show: true,scaleSize: 1,period: 20,color: '#fff',shadowBlur: 5},itemStyle: {normal: {borderWidth: 1,lineStyle: {type: 'solid'}}},data: [[{ name: '高经' },{ name: '洗手间', geoCoord: [440, 179] }],[{ name: '高经' },{ name: '洗手间', geoCoord: [637, 53] }],[{ name: '高经' },{ name: '洗手间', geoCoord: [637, 179] }],[{ name: '高经' },{ name: '洗手间', geoCoord: [307, 179] }]]}},{name: '会议室',type: 'map',mapType: 'baiduBuilding',roam: true,itemStyle: {normal: { label: { show: true } },emphasis: { label: { show: true } }},data: [],markPoint: {symbol: 'circle',symbolSize: 2,color: 'green',data: []},markLine: {smooth: true,effect: {show: true,scaleSize: 1,period: 20,color: '#fff',shadowBlur: 5},symbol: ['none'],itemStyle: {normal: {borderWidth: 1,lineStyle: {type: 'solid'}}},data: [[{ name: '淼童' },{ name: '五福降中天' }],[{ name: '大发' },{ name: '西湖春' }],[{ name: '林峰' },{ name: '望江南' }],[{ name: '莉姐' },{ name: '杏花天' }],[{ name: '雷哥' },{ name: '过江龙' }],[{ name: '毅楠' },{ name: '天下乐' }],[{ name: '红启' },{ name: '万年欢' }],[{ name: '亚江' },{ name: '浣溪沙' }],[{ name: '爽哥' },{ name: '得胜令' }],[{ name: '饥渴难耐的辉辉' },{ name: '万年欢' }]]}},{type: 'map',mapType: 'baiduBuilding',data: [],markPoint: {symbol: 'emptyCircle',effect: {show: true,color: 'rgba(218, 70, 214, 1)'},data: [{ name: '叮叮' },{ name: '小兑儿' },{ name: '胡瑶' },{ name: '淼童' }]}},{type: 'map',mapType: 'baiduBuilding',data: [],markPoint: {symbol: 'emptyCircle',effect: {show: true,color: 'rgba(100, 149, 237, 1)'},data: [{ name: '高经' }]}},{type: 'map',mapType: 'baiduBuilding',data: [],markPoint: {symbol: 'emptyCircle',symbolSize: 15,effect: {show: true,color: 'green'},data: [{ name: '五福降中天' }]}}]};}render() {return (<div id="main" style={{ width: 400, height: 400 }}></div>);}
}

echarts3.7.1 用例体验地图相关推荐

用户体验地图——互联网平台建设
本文主要分析用户体验地图.怎么绘制用户体验地图.拆分使用几部分.enjoy~ 以下是数字化转型的分享线路图,您现在所在的位置为序号的分享:生态圈建设中,最关键的一部分,载体之平台建设. 以下是正文: ...
Markdown mermaid种草(9)_ 用户体验地图
Markdown mermaid种草(9)_ 用户体验地图文章目录 Markdown mermaid种草(9)_ 用户体验地图 1 用户体验地图 2 用户体验地图举例 1 用户体验地图 User ...
高手在民间，用户体验地图这么画
用户体验地图的制作大致可以分为四步走: 明确用户目标提炼用户行为勾勒用户情绪曲线归纳痛点和机会点注:本文默认已经有构建好的用户画像.如果没有用户画像,那就还需要前置进行:如果产品用户层跨度大, ...
如何绘制用户体验地图
如何绘制用户体验地图序言作为一个产品的相关方,无论是产品经理,BA(业务专家),还是研发团队,等等,我们都希望做出来的产品,用户体验满意,甚至是爽.那么首先我们肯定需要明确我们的用户群体是谁,以及 ...
什么是用户体验地图？该如何绘制？
什么是用户体验地图? 就像打仗需要地形图,体验提升的战斗也需要一个蓝图来规划和指引. 用户体验地图(Experience Maps)也被称为使用者旅程图(User Journey Map). 用直白的 ...
(转）用户调研必修：如何建立用户体验地图
认认真真做了用户调研,就算大功告成了?图样图森破!古语说得好,学而不思则罔.你通过用户学到了很多他们关于产品的感受,如果不能将其好好分析与整理,那就只能是然并卵了.下面教大家其中一个分析用户调研资料的 ...
梁宁——用户体验地图和用户故事（阅读总结）
什么是用户体验地图用户体验地图,就是站在特定用户的角度,记录他在使用产品或服务的整个从接触.使用.互动到最后退出的过程,并检查自己的产品是不是满足了用户的需求,实现了用户的目标用户体验地图的五要素 ...
还不知道怎么制作用户体验地图？这份超全攻略送给你
用户体验地图就是记录从用户来到你的产品到完成目标离开的全部过程.通过直观地了解:用户如何使用自己的产品?以及在此过程中的整体感受,帮助我们寻找新的机遇去建立更好的用户体验.让企业的团队梳理用户视角.全 ...
用户体验地图一个不错的例子
来自拉钩教育的一个用户体验课程中,一个不错的例子,关于用户体验地图: 体验地图其实是一个可视化的分析工具,用于分析用户场景的关键环节和细节.研究用户使用产品的情况以及用户和产品交互中产生信息(包括遇到 ...

echarts3.7.1 用例体验地图

echarts3.7.1 用例体验地图相关推荐

最新文章

热门文章