0.echarts在vue项目中全局使用
1.npm i echarts
2.引入:在main.js中,import * as echarts from 'echarts'、Vue.prototype.$echarts = echarts
3.使用:在其他需要用的.vue文件中,通过this.$echarts使用
1.echarts 柱状图如何横向展示
*将xAxis与yAxis里面的内容互换*,可以横纵切换展示
xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: [24210,32524,50434,52421,98742] },
2.echarts 饼图(pie)的封装(各属性的讲解以及使用,自定义图例排列方式)
设计稿的图例是分两列,并且左对齐排列,解决方法是,legend用一个数组,并且 数组每一项orient 设置为’vertical’(垂直)。
// 封装公共饼图 commonPie(echart, seriesName, pieData) { // 基于准备好的dom,初始化echarts实例 const echarts = require('echarts') // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(echart) // 绘制图表 myChart.setOption({ backgroundColor: '', // 背景颜色透明 title: { text: '' // 因为所有图表的标题都是自己定义的,所以这里置空,有需要请自行查阅文档,文档还是要看的喽,不能偷懒哦。 }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, // 设置饼图的颜色 color: ['#F76367', '#17D982', '#FA8D3D', '#8B71F7'], legend: [{ // orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直) orient: 'vertical', icon: 'roundRect', left: '15%', bottom: 30, itemWidth: 18, // 设置图例图形的宽 itemHeight: 9, // 设置图例图形的高 textStyle: { color: '#fff', // 图例文字颜色 padding: [0, 0, 0, 12] // 设置图例icon距离文字的距离 }, // itemGap设置各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔 itemGap: 20, data: pieData.slice(0, Math.ceil(pieData.length / 2)).map(item => { return item.name }) }, { // orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直) orient: 'vertical', icon: 'roundRect', //这里有很多参数可选,按需要自行查阅文档 right: '15%', bottom: 30, itemWidth: 18, // 设置图例图形的宽 itemHeight: 9, // 设置图例图形的高 textStyle: { color: '#fff', // 图例文字颜色 padding: [0, 0, 0, 12] }, itemGap: 20, data: pieData.slice(Math.ceil(pieData.length / 2)).map(item => { return item.name }) }], series: [ { name: seriesName, type: 'pie', radius: '55%',// 设置环形饼状图, 第一个参数设置内圈大小,第二个参数设置外圈大小,一个参数表示是实心饼,实惠好吃,加量不加价!!! center: ['50%', '35%'],// 设置饼状图位置,第一个参数设置水平位置,第二个参数设置垂直位置 label: { show: false },// 隐藏值域的那条指向线 data: pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } // emphasis用来设置鼠标放到扇形上时的扇形样式、阴影 } } ] }) this.resizeEcharts(echart, myChart) },
3.echarts饼图图例自定义设置
图例和 label自定义主要通过 formatter: function(){}实现,在legend属性里面
图例样式设置: legend: { orient: 'vertical', left:10, top:50, itemWidth: 20, // 设置宽度 itemHeight: 20, // 设置高度 itemGap: 15, // 设置间距 textStyle: { // 文字颜色 color: 'black', // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 fontWeight: '700', // 字体系列 // fontFamily: 'Source Han Sans CN', // 字体大小 fontSize: 14 }, 图例文字设置--设置展示什么数据-根据自己的逻辑修改 formatter: function(name){ let item = _that.rightTypeList var selectNameList1 = []; for (var key in item.cve_intell_count) { if (key === "poc_source_count") { selectNameList1.push({ name: "漏洞概述信息", value:item.cve_intell_count[key] }); // return "漏洞概述信息"+item.cve_intell_count[key] } else if (key === "vn_artic_count") { selectNameList1.push({ name: "漏洞分析情报", value:item.cve_intell_count[key] }); // return "漏洞分析情报"+item.cve_intell_count[key] } else if (key === "poc_intel_count") { selectNameList1.push({ name: "漏洞预警信息", value:item.cve_intell_count[key] }); } else if (key === "other_intel_count") { selectNameList1.push({ name: "漏洞验证信息", value:item.cve_intell_count[key] }); } else if (key === "vn_intel_count") { selectNameList1.push({ name: "其他相关情报", value:item.cve_intell_count[key] }); } } var target for (var i = 0, l = selectNameList1.length; i < l; i++) { if (selectNameList1[i].name == name) { target = selectNameList1[i].value; } } return name + ' ' + ' ' + ' ' + target; }
4.echarts柱状图纵向变横向或者横向变纵向简单做法
直接将yAxis改成xAxis,反之亦然,就改一下字母,即可
5.echarts柱状图隐藏横坐标文字
在xAxis:[{show:false}]注意位置!
6.左侧10个tab选项,点击时,右侧显示柱状图,右侧柱状图数量不等,大于等于1.让数据实时改变
将柱状图封装为一个子组件,然后将v-for里面的item传过去,子组件监听item,重新赋值
7.echarts饼图图例一行一个
解决:设置legend的宽度就可以实现。
或者其他方法:
1.legend.width是显示图例的区域的宽度 宽度不够自动换行
2.formatter进行设值
8.图例位置和大小
位置:为了兼容性,最好用
x:'left',可设定图例在左、右、居中
y:'center',可设定图例在上、下、居中
大小:
textStyle: { // 文字颜色 color: 'black', // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... fontWeight: '700', // 字体系列 // fontFamily: 'Source Han Sans CN', // 字体大小 fontSize: 12 },