Echarts作图之柏拉图

Echarts版本：2.2.7

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="echarts/echarts.js"></script><script type="text/javascript">window.onload = function() {require(['echarts','echarts/chart/bar','echarts/chart/line',], function(ec) {var chartDom = document.getElementById("dv");console.log(chartDom);var myChart = ec.init(chartDom);var colors=["red","blue","green","black","orange","purple"]option = {title: {text: '测试',},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},formatter: function(params) {return params[0].name + '<br/>' +params[0].seriesName + ' : ' + params[0].value + '<br/>' +params[1].seriesName + ' : ' + (params[1].value + params[0].value);}},legend: {selectedMode: false,data: ['Acutal', 'Forecast']},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',data: ['top1', 'top2', 'top3', 'top4', 'top5', 'top6'],splitLine:false//data:[]},{type: 'category',show:false,boundaryGap : false,data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim',"333"],splitLine:false}],yAxis: [{type: 'value',boundaryGap: [0, 0.1],splitLine:false},{type: 'value',name: '温度',axisLabel: {formatter: '{value} %'},splitLine:false}],series: [{name: 'Acutal',type: 'bar',//barGap:'10%',barCategoryGap: '0%',itemStyle: {normal: {color: function(obj){if(obj.dataIndex>=0){return colors[obj.dataIndex];}},barBorderColor: 'tomato',barBorderWidth: 1,barBorderRadius: 2,label: {show: true,position: 'insideTop'}}},data: [300, 200, 180, 150, 120, 50]},{name: 'Forecast',type: 'line',xAxisIndex: 1,yAxisIndex: 1,data: [0, 30,50, 68, 83, 95,100 ]}]};myChart.setOption(option);})}</script>
</head><body><div id="dv" style="width:900px;height: 600px"></div>
</body></html>

转载于:https://www.cnblogs.com/gebizhuifenren/p/7747798.html

Echarts作图之柏拉图相关推荐

【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
我用Java+Redis+ES+Kibana技术对数百万知乎用户进行了数据分析，得到了这些...
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 作者:_artoria_ http://tinyurl.c ...
我用Java+SeimiCrawler+Redis+ES+Kibana技术对数百万知乎用户进行了数据分析，得到了这些......
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:_artoria_ 来源:http://tinyurl.co ...
Search For Free —— 新闻爬虫及爬取结果的查询网站
文章目录一. 项目概述 1.1 核心需求 1.2 技术要求二. demo展示 2.1 项目框架 2.2 演示demo视频三. 网站分析四.数据爬取 4.1 爬虫整体结构 4.2 使用的工具包 ...
Python对微信好友进行简单统计分析
早些日子有人问我我的微信里面有一共多少朋友,我就随后拉倒了通讯录最下面就找到了微信一共有多少位好友.然后他又问我,这里面你认识多少人?这一句话问的我很无语.一千多个好友我真的不知道认识的人有多少.他还 ...
傻瓜式制作在线热力图！只需三个步骤即可学会热力图的制作
热力图以特殊高亮的形式显示数据集中的所在的地理区域的图示.通过热力图的颜色深浅,高亮程度,可以直观清楚地看到区域数据分布.密度和变化趋势,获取数据焦点而无需数据分析,让人一目了然.地图-热力图通过标记 ...
echarts----带分割块的圆环图
效果展示组件封装基本思路首先我们知道,使用echarts作图,必须有个dom,作为图片显示的位置:图表显示的时候,我们可以通过grid下的一些配置来控制图表显示的位置,所以,如上图,就可以理解为 ...
百万知乎用户的数据分析
目录 1. 前言 2. 博客结构图 3. 爬取知乎用户数据 3.1 知乎用户页面解析 3.2 选取爬虫框架 3.3 使用反反爬手段 3.4 调用接口爬取数据 4. 分析知乎用户数据 4.1 数据去重 ...

Echarts作图之柏拉图

Echarts作图之柏拉图相关推荐

最新文章

热门文章