Echarts
文章平均质量分 78
花铛
这个作者很懒,什么都没留下…
展开
-
Echarts渲染完栅格热力图之后,无法再去渲染其他类型的问题
原因:Echarts的配置默认是合并的,渲染完栅格热力图之后,visualMap仍然存在,影响到了其他类型的配置,因此导致无法渲染。解决方法:对series中的数据项设置visualMap:false来避开visualMap映射,即可正常渲染显示。......//渲染栅格热力图......//清空栅格热力图//渲染散点图var data=[ { value: [10, 8], visualMap: false,//每一项都避开v原创 2020-06-12 16:27:22 · 471 阅读 · 0 评论 -
Echarts设置x轴文字垂直显示、倾斜显示或省略显示
垂直显示:let option = { xAxis:{ //文字样式 axisLabel: { show: true, textStyle: { color: '#595C61' }, fo...原创 2020-02-24 09:03:35 · 9202 阅读 · 0 评论 -
Echarts设置y轴的刻度只显示整数
在配置项的yAxis对象中添加属性:minInterval: 1,表示将刻度的最小间距设置为1。minInterval只在数值轴或时间轴中有效,所以要保证type为value或time。原创 2020-02-24 08:47:28 · 7730 阅读 · 1 评论 -
Echarts柱状图文字在柱体上垂直显示
var option={ series:[{ name: '', type: 'bar', //类型 data: [820], label: { show: true, position: 'insideBottom', ...原创 2020-01-19 09:45:27 · 7547 阅读 · 3 评论 -
Echarts饼图配置项
let option = { color:['#36BB95','#1A9AE9'], series: [ { name: '', type: 'pie', radius: ['50%', '70%'],//饼图半径 hoverAnimation : false...原创 2020-01-19 09:31:49 · 1858 阅读 · 0 评论 -
Echarts折线图配置项
option = { series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: false, //是否平滑曲线显示 symbolSize:0, //拐点的大小 color:['#13AF82'], //折线的颜...原创 2020-01-19 08:59:45 · 974 阅读 · 0 评论 -
Echarts柱状图的值,x轴的值,tooltip的值显示为百分比
var option = { tooltip: { trigger: 'axis', formatter:'{c}%', axisPointer: { type: 'shadow' } }, xAxis: { ...原创 2020-01-19 08:45:07 · 4290 阅读 · 0 评论 -
Echarts雷达图配置项
//常用的option配置:var option = { radar: { splitNumber: 3, // 雷达图圈数设置 axisLine: { lineStyle: { color:'black', // 设置雷达图中间射线的颜色 ...原创 2020-01-17 18:58:05 · 1539 阅读 · 0 评论 -
Echarts柱状图配置项
let option = { //标题 title: { text: '', textStyle: { color: "#fff", fontSize: 12 }, ...原创 2020-01-17 18:57:14 · 19483 阅读 · 0 评论 -
在echarts中使用百度地图扩展,实现在地图上叠加显示栅格热力图
思路:网格需要与接口返回的数据做匹配,拿到对应网格的value值来渲染热力。data:function(){ return { //多边形覆盖物 plateOverlays:[], //栅格默认的参数 blockDefaultParams:{ southWest: { lng: 112.963588, la...原创 2019-09-06 15:03:24 · 3517 阅读 · 7 评论 -
ECharts
获取ECharts:npm install echarts --save引入ECharts:<script src="echarts.min.js"></script>柱状图bar://为ECharts准备一个具备宽高的Dom容器 <div id="main" style="width: 600px;height:400px;"></div&g...原创 2019-05-06 11:00:17 · 265 阅读 · 0 评论 -
将百度地图引入到自己的网页中
打开百度地图生成器:http://api.map.baidu.com/lbsapi/creatmap/index.html将生成的代码保存为html文件.&lt;iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no&q原创 2019-03-13 11:28:22 · 279 阅读 · 0 评论 -
在echarts中使用百度地图扩展,实现在地图上叠加显示热力图
需要申请百度地图ak;//引入百度地图,echarts和百度地图扩展bmap<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=VifdHexZT4WOMrFYCQUZGorpRNjiRHer"></script><script src="node...原创 2019-06-17 15:46:08 · 4635 阅读 · 1 评论 -
Echarts隐藏坐标轴
xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], show:false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 axisTick:{ show:false//不显示坐标轴刻度线 }, axisLine: { show: false,//不显示坐标轴线 ...原创 2019-06-17 16:22:25 · 20183 阅读 · 1 评论 -
Echarts出现图表被压缩到很窄的情况的解决方法
图表被压缩到很窄,可能是因为JSs执行太快,CSS来不及渲染,导致canvas只有默认的宽度,可以使用setTimeout()延迟加载JS。原创 2019-08-22 15:27:57 · 12012 阅读 · 3 评论 -
使用 Echarts 和 Echarts 的百度地图扩展 bmap
1.npm安装echarts:npm install echarts --save2. 在main.js中引入echarts:import Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)安装百度地图:参照另一篇文章步骤。在需要的组件中引入:import BMap from 'BMap'...原创 2019-09-02 11:58:03 · 8241 阅读 · 7 评论 -
在echarts中使用百度地图扩展,实现在地图上叠加显示散点图
//初始化echarts,获得图表对象var echartsModal = echarts.init(document.getElementById('map'));echartsModal.setOption({ bmap: { roam: true,//用户是否可以拖放和缩放地图 ...原创 2019-06-11 14:50:48 · 2793 阅读 · 0 评论