关于echarts那些事儿

事儿"/>

关于echarts那些事儿

 

引言：随着图表的应用增多，很多echarts的配置你一定要知道，官网上的配置和案例都比较多，这里会介绍一些简单的配置，带你从0开始了解echarts的魅力

任何新技术的开始，都离不开文档

echarts官网：.html

关于如何进行引入使用，官网都讲的很清晰了

Documentation - Apache ECharts

可以按照例子，进行简单的了解图表

1.组件

      echarts都是组件的形式出现，官网上面有一张图很简单的展示了实例中各个组件

   

   每个组件都有自己的属性，可以根据自己想要的实现的样式进行组件属性的选择，每一个echarts都是由数据，x轴y轴，提示文本，标题等等组成，不同的echarts只需要写不同配置

Documentation - Apache ECharts

2.配置项详解

配置项，也就是option，每个图表都有自己的option，option配置不同，图表的出来的样式就各不相同，每一配置项最好自己在文档去找相关介绍

(1)基本配置项

关于图表基本的配置项一般就是，坐标的位置，背景，标题

(1)图的背景，标题，容器位置

      let option = {backgroundColor: "#fff",  //图表背景色title: { //图表的标题text: "echarts",textStyle: {  //文本样式color: "#333",fontSize: "14",},},grid: {  //图表在一个容器div中的位置left: "4%",right: "18%",bottom: "10%",top: "22%",containLabel: true, //grid 区域是否包含坐标轴的刻度标签。},};

(2) 关于x轴(xAxis)和y轴(yAxis)配置项

轴的配置项的属性都是差不多的，最常见的属性，show(是否显示),splitNumber(分隔)

xAxis: [{type: "category",  //坐标轴类型 （value, category, time, log）boundaryGap: false,name: "月份",nameTextStyle: {color: "#fff",fontSize: 14,},axisLine: { //坐标轴轴线相关设置。数学上的x轴show: true,lineStyle: {color: "#0d2e41",},},axisLabel: {   //坐标轴刻度标签的相关设置textStyle: {color: "#fff",// padding: 16,fontSize: 14,},formatter: function (data) {return data;},},splitLine: {  //分割线show: true,lineStyle: {color: "#152437",},},axisTick: {  //坐标轴刻度相关show: false,},data: xData, //x轴的数据},]

（3）tooltip-提示框

     tooltip: {show: true,  //是否展示trigger: "item",  //展示方式formatter(params) {  //自定义展示模式return `<div style="color:#47C1FF;border:none !imporant;">${params.value}</div>`;},position: "top",padding: 0,borderColor: "transparent",backgroundColor: "transparent",},

4.series - series是一个数组，一个坐标系可能会展示多个图表，series就是配置图表在坐标中的类型等

配置项就简单的介绍到这，配置项-Documentation - Apache ECharts

官网的每一个配置项都讲解的很详细，只是某些文字可能描述的不太明白，可以根据需求自己去尝试，配置项只需要大致了解就好了，了解之后对功能需求就会上手很快

3.常见echarts的功能配置

经常都会配置许多相似的图表，比如渐变色等等，下面总结了一些常见的配置项

(1) 网格背景

- 配置xAxis与yAxis的splitLine,调整样式颜色等，代码如配置项中的xAxis

(2) 渐变色

  color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(25,163,223,.3)",},{offset: 1,color: "rgba(25,163,223, 0)",},],false)

①折线图的渐变色

②柱状图的渐变色

 

 

 (3) 折线图的转点标记

 (4)虚线圆

 这个图是有两个圆形组合而成，虚线圆是怎么来的呢？

{type: "pie",zlevel: 3,silent: true,radius: ["73%", "74%"],label: {normal: {show: false,},},labelLine: {normal: {show: false,},},data: pie(),}
}pie() {  //虚线数据let dataArr = [];for (var i = 0; i < 100; i++) {if (i % 2 === 0) {dataArr.push({name: (i + 1).toString(),value: 25,itemStyle: {normal: {color: "#07646a",borderWidth: 0,borderColor: "rgba(0,0,0,0)",},},});} else {dataArr.push({name: (i + 1).toString(),value: 20,itemStyle: {normal: {color: "rgba(0,0,0,0)",borderWidth: 0,borderColor: "rgba(0,0,0,0)",},},});}}return dataArr;}

 (5)提示文本循环显示

利用dispaAction进行动态设置提示文本

    startInterVal(mychart, yData) {le tindex = 0;this.timeId = setInterval(() => {//使得tootip每隔三秒自动显示mychart.dispatchAction({type: "showTip", // 根据 tooltip 的配置项显示提示框。seriesIndex: 0,dataIndex: index,});index++;if (index === yData.length) {index = 0;}}, 3000);},

（6）一定宽度溢出显示省略号

 width: 100,overflow: 'truncate',ellipsis: '...'

 

 4. vue将一个图表进行封装

<template><div class="wrap" :id="id"></div>
</template><script>
import * as echarts from 'echarts'
export default {props: {// DOMIDid: {type: String,default: 'chart-id-'+new Date().getTime()},// 数据data: {type: Array,default: []}},mounted(){this.$nextTick(()=>{this.initChart()})},watch: {data: {deep: true,handler: function(){this.initChart()}}},methods: {initChart(){echarts.init(document.getElementById(this.id)).dispose()let mychart = echarts.init(document.getElementById(this.id))// 设置响应式window.addEventListener('resize', function (){mychart.resize()})let option = {}// 挂载配置mychart.setOption(option )}}
}
</script><style scoped>
.wrap{width: 100%;height: 100%;
}
</style>

5 .例子

(1)环状

//  饼状图
function barChart({title,num,ratio,isshowRatio = true,fontSizeTitle = '14',fontSizeNum = '14',fontSizeRatio = '18',colorTitle = '#c7dbf5',colorNum = '#00d6d3',colorRatio = '#00d6d3',lineColor = ['#0d9dbb', '#4afacc'],topTitle = '70%',leftTitle = '43%',leftNum = '43%',topNum = '83%',imgUrl,imgWidth,imgHeight,leftImg = 'center',topImg = 'center'
} = params) {var placeHolderStyle = {normal: {label: {show: false},labelLine: {show: false},color: "rgba(0,0,0,0)",borderWidth: 0},emphasis: {color: "rgba(0,0,0,0)",borderWidth: 0}};var dataStyle = {};if (isshowRatio) {dataStyle['normal'] = {formatter: '{c}%',position: 'center',show: true,textStyle: {fontSize: fontSizeRatio,fontWeight: 'normal',color: colorRatio,display: 'none'}}}var option = {backgroundColor: '',  //设置整个echarts的背景色title: [    //文字文本，可以设置文本的位置，样式等{text: title,left: leftTitle,top: topTitle,textAlign: 'center',textStyle: {fontWeight: 'normal',fontFamily: 'youshe',fontSize: fontSizeTitle,color: colorTitle,textAlign: 'center',},},{text: num,left: leftNum,top: topNum,textAlign: 'center',textStyle: {fontWeight: 'normal',fontFamily: 'youshe',fontSize: fontSizeNum,color: colorNum,textAlign: 'center',},}],//第一个图表series: [{   //数组构成，每一个对象由type决定图表类型type: 'pie',  //饼状hoverAnimation: false, //鼠标经过的特效radius: ['75%', '100%'], //饼状图的半径center: ['50%', '50%'],  //半径对应的圆点startAngle: 225,  //开始角度label: {show: false},data: [{value: 100,itemStyle: {normal: {color: '#041632',}},},{value: 35,itemStyle: placeHolderStyle,},]},// 上层环形配置{type: 'pie',hoverAnimation: false, //鼠标经过的特效radius: ['75%', '100%'],center: ['50%', '50%'],startAngle: 225,data: [{value: ratio,itemStyle: {normal: {color: {type: 'linear',colorStops: [{offset: 0,color: lineColor[0] //  0%  处的颜色},{offset: 1,color: lineColor[1] //  100%  处的颜色}],global: false //  缺省为  false}}},label: dataStyle,},{value: 135 - ratio,itemStyle: placeHolderStyle,},]},],};if (imgUrl) {var graphic = {elements: [{type: 'image',style: {image: imgUrl,width: imgWidth,height: imgHeight},left: leftImg,top: topImg}]}}option['graphic'] = graphic;return option
}

2.实现线性渐变色

    效果图：

    实现主要配置 - 根据itemStyle,areaStyle属性设置

this.echartDie.setOption({title: {// text: 'ECharts 入门示例'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#000'}}},grid: {top: 10,left: 60,right: 60},legend: {bottom: 0}, // 显示数据xAxis: {type: 'category',name: '单位(天)',boundaryGap: false,data: [0, 5, 10, 15, 20]},yAxis: {type: 'value',min: 0,max: 100,splitNumber: 4,interval: 25,axisLabel: {formatter: '{value} %'}},series: [{data: [5, 100, 20, 45, 65],type: 'line',name: '实际使用量',smooth: true,itemStyle: {normal: {color: '#23a4f5',lineStyle: {color: '#23a4f5'}}}, // 线条样式areaStyle: {normal: {// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#c2e7ff80'},{offset: 1,color: '#ffffff80'}])}}},{data: [0, 25, 50, 75, 100],type: 'line',name: '理想适用度',smooth: true,itemStyle: {normal: {color: '#43d3c2',lineStyle: {type: 'dashed',color: '#43d3c2'}}}}]});

    (2)实现不同坐标系

  效果图  - 网格图

    利用splitLine实现网格，boundaryGap实现数据显示位置，居中还是在坐标系上

 this.echartsDou.setOption({title: {// text: 'ECharts 入门示例'},// 鼠标移入提示文本tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#000'}}},// 网格信息grid: {top: 20,left: 60,right: 20,default: '#ccc'},legend: {bottom: 0}, // 显示数据xAxis: [{type: 'category',boundaryGap: false, // 数据显示位置data: [0, 10, 20, 35, 40, 50, 60],axisLabel: {formatter: '{value}M'},// name: '流量分段',// 网格样式splitLine: {show: true,lineStyle: {color: '#ebebeb',width: 1,type: 'solid'}}},{boundaryGap: '50%',type: 'category',boundaryGap: true,show: false,// 数据显示位置data: [10, 20, 35, 40, 50, 60],axisLabel: {formatter: '{value}M'},// 网格样式splitLine: {show: true,lineStyle: {color: '#ebebeb',width: 1,type: 'solid'}}}],yAxis: {type: 'value',min: 0,max: 4000,splitNumber: 4,interval: 1000,// 网格样式splitLine: {show: true,lineStyle: {color: '#ebebeb',width: 1,type: 'solid'}}},series: [{data: [3500, 1000, 2000, 4000, 3200, 2500, 1200],type: 'line',name: '实际使用量',smooth: true,itemStyle: {normal: {color: '#8084D9',lineStyle: {color: '#8084D9'}}} // 线条样式},{data: [1200, 2020, 1520, 820, 2000, 4100],name: '月平均DOU',xAxisIndex: 1,type: 'bar',barWidth: '20',// barCategoryGap: '100',itemStyle: {normal: {color: '#23a4f5',barBorderRadius: [4, 4, 0, 0]}}}]});

（3）实现圆的文字的居中

    效果图

利用title地位，和graphic定位实现

   this.echartsAnalyse.setOption({title: {text: 5,x: 'center',y: 'center',top: 150,left: 470,textStyle: {fontSize: 20,color: 'black',fontWeight: 800}},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},graphic: {type: 'text',left: '435px',top: '185px',// left: 'center',// top: 'center',z: 2,zlevel: 100,style: {text: '总流量池(个)',textAlign: 'center',fill: '#333',width: 100,height: 30,fontSize: 16}},color: ['#23a4f5', '#3cd1c0', '#ebdc52', '#ffa53b', '#8084d9'],legend: {orient: 'vertical',icon: 'circle',// left: 10,right: 700,top: 20,bottom: 20,data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{// name: '访问来源',type: 'pie',radius: ['60%', '78%'],center: ['30%', '53%'],avoidLabelOverlap: false,label: {show: false,position: 'center'},itemStyle: {normal: {borderWidth: 5,borderColor: '#fff'}},emphasis: {label: {show: false, // 中间不显示默认字体fontSize: '30',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' },{ value: 1548, name: '搜索引擎' }]}]});

   （4）文字换行，渐变色， pictorialBar

function attackSourcesDataFmt(sData) {var sss = [];sData.forEach(function (item, i) {let itemStyle = {color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],};sss.push({value: item,itemStyle: itemStyle,});});return sss;}let option = {grid: {left: '10%',right: '15%',bottom: '15%',top: '15%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},xAxis: {type: 'value',name: '单位/万元',axisLine: {show: true},splitLine: {show: false,lineStyle: {color: 'rgba(255,255,255,.1)'}},nameTextStyle: {color: 'rgba(230,243,255, 0.8)'},axisLabel: {interval: "auto",textStyle: {color: 'rgba(230,243,255,0.8)',fontSize: 12},},},yAxis: [{type: 'category',inverse: true,axisLabel: {show: true,textStyle: {color: 'rgba(230,243,255,0.8)'},formatter: function (params) {console.log(params)return params.length > 9 ? `${params.substring(0, 6) + '\n' + params.substring(6)}` : params}},axisTick: {show: false,},splitLine: {show: false},axisLine: {show: true},data: this.xData},],series: [{name: '',type: 'bar',zlevel: 1,itemStyle: {normal: {barBorderRadius: 0,color: (params) => {return colorList[params.dataIndex]}},},barBorderRadius: [4, 24, 3, 4],barWidth: 20,data: attackSourcesDataFmt(data)},{name: '头部1',type: 'pictorialBar',z: 20,label: {show: true,position: 'right'},data: [{value: 50,symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',symbolSize: [16, 20],symbolOffset: [8, 0],symbolPosition: 'end',itemStyle: {color: 'rgb(24, 144, 255)'},},{value: 60,symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',symbolSize: [16, 20],symbolOffset: [8, 0],symbolPosition: 'end',itemStyle: {color: 'rgb(0, 233, 255)'},}, {value: 70,symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',symbolSize: [16, 20],symbolOffset: [8, 0],symbolPosition: 'end',itemStyle: {color: 'rgb(34, 230, 205)'},}, {value: 20,symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',symbolSize: [16, 20],symbolOffset: [8, 0],symbolPosition: 'end',itemStyle: {color: 'rgb(24, 144, 255)'},},]}]};

(1)文字换行

 formatter: function (params) {console.log(params)return params.length > 9 ? `${params.substring(0, 6) + '\n' + params.substring(6)}` : params}

formatter是一个函数 - 可以对文本进行处理，最后return一个格式

return的也可以是一个html

(2)颜色

 

对于data颜色的配置，如果是都是相同颜色只需要统一配置，颜色不同，需要配置要每一个data里面

(3)symbol

 对于这种不规则图形结尾的，可以采用拼接的方式，利用pictorialBar(象形柱图)

symbol - 官网提供了一些规则图形 - 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

-自定义图片（'image:///a/b.png'）

-可以通过 'path://' 将图标设置为任意的矢量路径

path路径是怎么画的?

 M表示moveto， L s 表示lineto s ， z表示closepath

以三角形为例

 symbol: 'path://M 0 0 L 100 100 L 300 100 L 200 300 z',

 以案例为例

 symbol: 'path://M 0 0 L 6 0 L 0 10 L -6 10 z',

 

总结，echarts图表是由很多组件进行组合而成，根据官网查看对应组件的配置，完成自己想要的图形效果,后续想到了在补充

最后给大家推荐一个echarts常用网站 - EChartsDemo集

码字不容易，点个赞吧！