Echarts的使用总结

反向坐标轴

有时候做一些功能的折线图时需要使用到反向坐标轴（如排名的变化趋势）就需要用到Echarts的反向坐标轴的功能。

yAxis: {type: 'value',inverse: true, //y轴坐标轴向下axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},
},

隐藏图表标题

可以使用如下代码或者直接删除这一条代码

title: {title: { text: null },
},

tooltip内容文字的样式设置

这里参考了一位博主的博客：echarts图中tooltip内容文字的样式设置
默认的tooltip就是一个div，直接在formatter里面添加span设置好颜色就可以了

tooltip: {backgroundColor: "#FFF", //设置tooltip的背景颜色颜色为白色（默认的为半透明黑色）borderColor: "#C3CBD6", //修改边框线颜色（默认没有边框线颜色）borderWidth: 1,//修改边框线的宽度//axisPointer: { lineStyle: { color: "#C3CBD6" } },//formatter: '<span style="color: #657180; margin-left: 8px; float: right;">{a} <br/>{b} : {c}</span>' //内容显示格式textStyle: {//显示的字体颜色，样式以及大小fontSize: 12,color: '#657180',fontFamily: 'MaerskText-Regular'},
},

修改后的tooltip的样式

使用formatter改变数据显示方式（如添加百分号符号）

, formatter(params) {for (x in params) {return params[x].name + ":<br/>" + params[x].value+"%";}
}

雷达图

radar: {//shape: 'circle', //可以改变为圆弧形，默认是五角形name: {textStyle: {padding: [7, 7],//五个角的类别名离图形的上下左右距离color: '#2b425b',fontSize: 14,fontFamily: 'MaerskHeadline-Bold',},},//指示文字的样式indicator: nums,
},
series: [{symbolSize: 18, //五个角的圆圈大小name: 'Personal competence',type: 'radar',itemStyle: {normal: {color: 'red', //数值显示的颜色lineStyle: {color: '#29a4ff' //内部边框线的颜色，这里改为了蓝色}}},areaStyle: { normal: { color: '#ffffff' } },//内部区域图形的颜色data: [{value: values,label: {normal: {show: true,formatter: function (params) {return params.value}}}//折线上显示具体数值}]
}]

柱形图（单一种类）

myChart.setOption(option);
option_Bar = {tooltip: {backgroundColor: "#FFF",borderColor: "#C3CBD6",borderWidth: 1,trigger: 'axis',axisPointer: {type: 'shadow'},textStyle: {fontSize: 12,color: '#657180',fontFamily: 'MaerskText-Regular'},},//tooltip的样式设置calculable: true,xAxis: [{type: 'category',axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},data: nums_Bar,}],//x轴的样式和数值yAxis: [{type: 'value',axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},}],//y轴的样式和数值series: [{barWidth: '20',name: 'Volume',type: 'bar',data: values_Bar,itemStyle: {normal: {color: '#43afd4', //柱形图的颜色设置，这里为蓝色label: {show: true,//是否在柱形图上显示数值position: 'top',//设置柱形图数值显示的位置，这里设置在柱形图的顶部formatter: '{c}',//柱形图数值的的格式，这里只让它显示了数值，当然也可以显示类名等等fontFamily: 'MaerskText-Regular',//数值显示的字体样式fontSize: 12,//数值显示的的字体大小}},},},]
};
myChart_Bar.setOption(option_Bar);

柱状图（多种类）

与只有一个种类的柱形图相比，多种类的需要再series中添加更多的数据源

var myChart = echarts.init(document.getElementById('Bar'));
option = {title: {text: 'TOP 10 IN THE TEAM',textStyle: {fontSize: 16,fontFamily: 'MaerskHeadline-Regular',}},color: ['#43afd4', '#13253b', '#878787'],//柱形图的颜色tooltip: {backgroundColor: "#FFF",borderColor: "#C3CBD6",borderWidth: 1,trigger: 'axis',formatter: function (params) {var res = '<div><p>' + params[0].name + '</p></div>'for (var i = 0; i < params.length; i++) {if (i==2) {res += '<p>' + params[i].seriesName + ':' + params[i].data + '%</p>'} else {res += '<p>' + params[i].seriesName + ':' + params[i].data + '</p>'}}return res;},textStyle: {fontSize: 12,color: '#657180',fontFamily: 'MaerskText-Regular'},},legend: {y: '0px',data: ['Total Score', 'Accuracy', 'Production']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },saveAsImage: { show: true }}},calculable: true,xAxis: [{type: 'category',axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},data: names,}],yAxis: [{type: 'value',axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},}],series: [{barWidth: '15',name: 'Total Score',type: 'bar',barGap: 0,data: AVGScore,itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}',fontFamily: 'MaerskText-Regular',}},},},{barWidth: '15',name: 'Accuracy',type: 'bar',data: AVGAcc,itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}',fontFamily: 'MaerskText-Regular',}},},},{barWidth: '15',name: 'Production',type: 'bar',data: AVGPro,itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}%',fontFamily: 'MaerskText-Regular',}},},},]
};
myChart.setOption(option);

折线图（单一种类折现趋势）

option_RankLine = {tooltip: {backgroundColor: "#FFF",borderColor: "#C3CBD6",borderWidth: 1,textStyle: {fontSize: 12,color: '#657180',fontFamily: 'MaerskText-Regular'},trigger: 'axis'},toolbox: {show: true,orient: 'vertical',left: 'right',//显示在图形的最右边top: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },//数据视图，即以表格的方式显示折线的数据magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },//切换为折线图，柱形图，堆叠图按钮restore: { show: true },//充型加载数据按钮saveAsImage: { show: true }//下载图片按钮}},//侧边的工具栏grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},//图形到容器div的距离xAxis: {type: 'category',axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},boundaryGap: false,data: rank_weeknum,},yAxis: {type: 'value',inverse: true,//反向y轴axisLabel: {show: true,textStyle: {fontFamily: 'MaerskText-Regular',}},},series: [{name: 'Rank',type: 'line',data: rank_num,itemStyle: {normal: {color: '#43afd4',label: {show: true,position: 'top',formatter: '{c}',fontFamily: 'MaerskText-Regular',}},},},]
};
myChart_RankLine.setOption(option_RankLine);

折线图（多种类）

多种类折线图和单一折线图和多种类的折线图的区别是series中的数据类别更多，折线就会出现多条折线

myChart_Line.setOption({title: {text: 'Historical case data',textStyle: {fontSize: 16,fontFamily: 'MaerskHeadline-Regular',}},tooltip: {backgroundColor: "#FFF",borderColor: "#C3CBD6",borderWidth: 1,textStyle: {fontSize: 12,color: '#657180',fontFamily: 'MaerskText-Regular'},trigger: 'axis'},color: ['#878787', '#00786b', '#f46a55', '#cecece', '#13253b', '#43afd4'],//设置各类别折线的颜色legend: {data: ["AMD booking", "Case", "Doc", "Fresh booking", "Report", "VAS report"]},//显示在顶部的类别提示toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {mark: { show: true },dataView: { show: true, readOnly: false },//magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },//restore: { show: true },saveAsImage: { show: true }}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: names_date},yAxis: {type: 'value'},series: [{name: 'AMD booking',type: 'line',stack: '总量',data: nums_All_AMD_booking},{name: 'Case',type: 'line',stack: '总量',data: nums_All_case},{name: 'Doc',type: 'line',stack: '总量',data: nums_All_Doc},{name: 'Fresh booking',type: 'line',stack: '总量',data: nums_All_Fresh_booking},{name: 'Report',type: 'line',stack: '总量',data: nums_All_Report},{name: 'VAS report',type: 'line',stack: '总量',data: nums_All_VAS_report}]
});

Echarts的使用总结相关推荐

echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市，并定义复杂样式
实现如下效果用echarts geo类型的中国地图封装vue组件,具体的地图信息china.json传送门https://blog.csdn.net/qq_37860634/article/deta ...
JS实现每隔几个字符添加字符(串)：实现每间隔10个字就换行一次，多用于echarts横坐标的显示文本拥挤换行；实现间隔8个字符就添加❤❤
//最直接一行代码搞定---------------------------------------- '实现每间隔10个字就换行一次,多用于echarts横坐标的显示文本'.replace(/(.{ ...