ECharts 实例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 800px;height:800px;"></div><script type="text/javascript">var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;const data = genData(35);
option = {title: {text: '同名数量统计',left: 'center'},toolbox: { // 工具盒show: true,feature: { // 工具saveAsImage: { // 保存图片type: "png"},restore: { // 复原show: true},dataView: { // 显示数据show: true}}},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {type: 'scroll',orient: 'vertical',right: 10,top: 20,bottom: 20,data: data.legendData},series: [{name: '姓名',type: 'pie',radius: '55%',center: ['40%', '50%'],data: data.seriesData,label: {normal: {show: true,formatter: '{b}:{c}' + '\n\r' + '({d}%)'}},emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},}]
};
function genData(count) {// prettier-ignoreconst nameList = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'];const legendData = [];const seriesData = [];for (var i = 0; i < count; i++) {var name =Math.random() > 0.65? makeWord(4, 1) + '·' + makeWord(3, 0): makeWord(2, 1);legendData.push(name);seriesData.push({name: name,value: Math.round(Math.random() * 100000)});}return {legendData: legendData,seriesData: seriesData};function makeWord(max, min) {const nameLen = Math.ceil(Math.random() * max + min);const name = [];for (var i = 0; i < nameLen; i++) {name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);}return name.join('');}
}option && myChart.setOption(option);</script>
</body>
</html>

ECharts 实例相关推荐

Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts实例，在线引入echarts
下载地址 https://echarts.apache.org/zh/download.html 保存页面与html存于一个文件夹引入在线版本echarts <!DOCTYPE html> ...
Obiee+echarts实例之饼图（2）
一.效果图 1.这是用Obiee + echarts做出来的饼图,效果如图: 2.数据(仅供参考),如图: 二.代码解析 //前缀  <s ...
vue整合Echarts 实例PM2.5全国主要城市空气质量百度地图
ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家<测绘法>规定,目前暂时停止下载服务.建议大家使用以百度地图为底图的形式. 首先申请获取百度开发秘钥ak: ht ...
Echarts中 vab-chart 以全局组件使用时，获取Echarts实例，使用this.myChart.setOption （）
Echarts 以全局组件使用时,获取Echarts实例,使用this.myChart.setOption (),用于解决二次查询销毁上一次的图表代码图代码 legendselect(params ...
Echarts实例中json数据查找
在学习Echarts时,查看实例时候需要配合实例的数据理解代码.数据获取可以通过chrome的开发者工具获取,在chrome的开发者工具的Network下可以看到json的请求连接,右键点击就可以复制 ...
初始化echarts实例
(作者:苦行者:撰写时间:2019年6月15日) 1.在此之前首先要引入一下Echarts插件. 2.html部分如下. 在这里要实例化的图例有三种,分别是饼状图.柱状图和折线图,给它们固定的宽度和高 ...
ECharts实例开发学习笔记二——时间轴
记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
ECharts实例(4)
2019独角兽企业重金招聘Python工程师标准>>> // 默认触发事件 $(function(){$(document).ready(function() {$("#d ...

ECharts 实例

ECharts 实例相关推荐

最新文章

热门文章