记得：echarts的初始化还有渲染一定要在vue的mounted去处理。
echarts 三步走
1.mounted拿到数据初始化。
2.处理完假造好自己options
3. 去处理
let chartDom = document.getElementById('chart1')
this.myChart = echarts.init(chartDom)
this.option && this.myChart.setOption(this.option)
一. echarts
echarts ： echarts.apache.org/zh/index.ht…
ant design charts charts.ant.design/zh
分享可视化库的网站 jishuin.proginn.com/p/763bfbd6e…
社区打不开了，分享几个ppchart.com/#/ tieba.baidu.com/p/769890527… www.zhihu.com/question/51…
echarts底层用的是zRender，在它的基础上丰富的。
二. eachrts的使用
- 创建一个div 设置它的高度和大小。(先有一个元素)
<div id="lineChart" style="width:600px;height:400px">
- 在获取这个元素，用id
var lineChartDom = document.getElementById('lineChart')
- 先初始化echarts.initial（）
this.myLineChart = echarts.init(lineChartDom)
- 在写配置项
var lineOption = {
xAxis: {
type: 'category',
boundaryGap: false,
},
yAxis: {
name:'次数',
type: 'value'
},
legend:{
show:true,
bottom:0,
},
tooltip:{
trigger:'axis',
triggerOn:'mousemove'
},
series: [
{
name:'创建订单数',
type: 'line',
areaStyle: {},
axisPointer:{
},
smooth:true
}, {
name:'付款订单数',
type: 'line',
areaStyle: {},
axisPointer:{
},
smooth:true
}
]
},
- 最后setOption将图画出来,就是把配置项set进去
不这样写，多次渲染的时候汇报警告。我也不知道为啥？
lineOption && myLineChart.setOption(lineOption)
- 在vue中的写法
this.lineChartDom = document.getElementById('lineChart')
if (this.myLineChart == null) {
this.myLineChart = this.$echarts.init(this.lineChartDom)
}
this.lineOption && this.myLineChart.setOption(this.lineOption)
三.eachrts的基本配置
配置项手册 ：echarts.apache.org/zh/option.h…
1.首先图表分为七个大类
----柱状图、 折线图、散点图、 饼图、地图、雷达图、仪表盘图 ----
2.所有的图都可以配置的配置项
1.title 标题
2.tooltip提示
3.toolbox 工具按钮
4.legend图例
--- 还有，其中折线图、散点图和柱状图都用得到，横竖坐标轴
a. xAxis x轴
b. yAxis y轴
c. series 系列列表 type来决定图标的类型
3. 通用配置tooltip
tooltip（提示框组件，用于配置鼠标划过或点击图标时的显示框）
- 触发类型：trigger： item 、 axis
- 触发时机： triggerOn：mouseover、click
- 格式化 ： formatter 字符串模板，回调函数
toolbox:{
feature :{
saveAsImage:{},//导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{
type:['bar','line']//动态图标切换
}
}
}
**4.最大值、最小值、平均值 **
//1. 最大值、最小值
markPoint :{
data:[
{
type:'max',name:'最大值'
},{
type:'min',name:'最小值'
}
]
},
//2. 平均值
markLine:{
data:[{
type:'average',name:'平均值'
}]
}，
5. 数值显示 柱宽度，横向柱状图
数值显示 label
柱宽度 barWidth
横向柱状是通过改变x轴和y轴的角色来换位置
四、柱状图、折线图和散点图（属于直角坐标系）
a.折线图
- 标记 ：最大值、最小值、平均值 标注区间
对应： markPoint、markLine、 markArea
- 线条控制：平滑 风格
对应：smooth 、lineStyle
- 填充风格
对应： areastayle
- 紧挨边缘
对应： boundatyGap
- 缩放：脱离0值比例
对应： scale
- 堆叠图
对应：stack
tips：需求遇到的问题
- 固定y轴坐标数值
- 设置落上去就显示详细信息
主要设置出发的方式，和展示形式
tooltip:{
trigger:'axis',
triggerOn:'mousemove'
},
2.散点图
散点图需要的数据横纵坐标都是数值，所以数据是一个二维数组。
散点图的配置，在serise：{type:scatter}并且因为x和y轴都是数值，所以xAxis和yAxis的type都是value
比如说一个身高体重的散点图，这边的数据就需要做下处理，格式应该是
var arr =[[身高1,体重1],[身高2,体重2],[身高3,体重3]]
常见效果分为两种：气泡图和涟漪图
a.气泡图
//改变气泡大小
serise:[{
symbolSize:function(arg){
var weight =arg[0]
var height =arg[1]
var bmi = weight /(height*height)
if(bmi>28){
return 40
}else{
return 20
}
}，
//改变颜色
itemStyle:{
color:function(arg){
var height =arg.data[0]
if(height>70){
return 'green'
}else{
return 'red'
}
}
}
}]
b.涟漪图
只需要设置type的值就可以实现
serise：[{
type : effectScatter ,
showEffectOn：emphasis //这个来控制动画出现的时间移入时出现效果
//其中的这个属性来控制涟漪动画的样子
rippleEffect:{
scale:5,//缩放的比例
}
}]
五、直接坐标系的配置（grid等等）
只有有x轴和y轴的才可以。
1.grid配置（网格配置）
他是一个对象，一个grid里面最多有两种x轴和y轴
grid:{
show:true, //控制他显示与否
borderWidth:10, //控制他的边框宽度
borderColor：'red', //边框颜色
left:120,//距左边的位置
top:120,//距上面的位置
width:120,//宽度
height:120,//高度
}
2.axis （坐标轴配置）
xAxis是x轴，yAxis是y轴
1. axis里面设置type时type是value的话就会自动去series里面的data赵对应数据，如果设置的是category就需要自己给data设置数据
2.x轴可以选择上下两边展示，top或者bottom,y轴可以选择left和right
xAxis:{
type:'category',
data:list，//自己设置
bottom:true
},
yAxis：{
type:'value',
},
serise:{
data://这里面找
}
3.区域缩放（dataZoom）
这个配置和前面的配置（toolbox）不一样更加高端 。
var option ={
dataZoom:[{
type:'silder'是滑块拖动 'inside'是内置鼠标的滚轮控制或者双击
xAxisIndex:一般设置0，第一个x轴
}，{
type：'silder',
yAxisIndex:0,设计缩放控制那个轴
start:30,
end:50
}]
}
六、饼图
1.series里面的type设置为pie即可 2.label控制显示详细情况 3.圆环的设置需要两个半径的设置来控制radius 4.南丁格尔图的实现把reduis去掉。roseType设置为reduis即可 5.选中之后的样式设置selectedMode
var option ={
series:[{
type:'pie'是滑块拖动 'inside'是内置鼠标的滚轮控制或者双击
data:[{
name:'jaksdh',
value:123
},{
name:'jaksdh',
value:123
}]
}],
label:{//控制显示的
show:true, //默认都是显示的
formatter：function(arg){
return //把arg打印出来看看。来写自己需要的/n可以换行
}
},
redius:20,就是半径大小
redius:20%,还可以写百分比参照的是容器的大小
redius:['50%','75%'],就是圆环
roseType:'reduis' 南丁格尔图。但是不要上面三个
selectedMode：'single' 单个点击之后远离的样式
selectedMode：'multipie' 多个选中远离
selectedOffSet:20 远离的距离
}
七 、 地图
1.使用Ajax来获取china.json
$.get('json/map/chinas.json',function(chinajson){})
2.在回调函数中往echarts全局对象注册地图的json数据
echarts.registerMap('chiansMap',chinajson)
3.在geo下设置
type:'map',
map:'chinaMap'
1.解决重复渲染的报错
做完的折线图，需求需要用时间去筛选，如果多次init初始化图表，会报警告。
“There is a chart instance already initialized on the dom.”
就是说你已经有初始化了，不需要一直初始化。
//检测是否已经存在echarts实例，如果不存在，则不再去初始化
let myChart = this.$echarts.getInstanceByDom(
this.$refs[this.chartObj.type]
);
if (myChart == null) {
myChart = this.$echarts.init(this.$refs[this.chartObj.type]);
}
myChart.setOption(this.option);
//获取实例
this.lineChartDom = document.getElementById('lineChart')
//初始化的时候判断一下就可以了
if (this.myLineChart == null) {
this.myLineChart = this.$echarts.init(this.lineChartDom)
}
//最后set进去
this.lineOption && this.myLineChart.setOption(this.lineOption)
2. 筛选之后重复渲染echarts
vue中，重点就是第二次筛选完之后要赋值，一定要在一次init 和set图表就可以了。
// 筛选之后
filterAll(){
this.lineChartDom =this.myLineChart =null
this.getLine()
},
// 折线图
getLine(){
requestByClient(Partner, 'POST', '/api/smartEventOrder/statistics' ,
{
goodsName:this.chooseGoods,
startTime:this.chooseTime?this.chooseTime[0]+' 00:00:00':this.aMonthAgo,
endTime:this.chooseTime?this.chooseTime[1]+' 23:59:59':this.nowDate
},
(resp) => {
if (resp.data.data){
this.lineOption.xAxis.data =resp.data.data.xdata
this.lineOption.series[0].data =resp.data.data.ydataList[0].data
this.lineOption.series[1].data =resp.data.data.ydataList[1].data
this.lineChartDom = document.getElementById('lineChart')
if (this.myLineChart == null) {
this.myLineChart = this.$echarts.init(this.lineChartDom)
}
this.lineOption && this.myLineChart.setOption(this.lineOption)
}else {
this.$message('没有数据')
this.lineOption.xAxis.data =[]
this.lineOption.series[0].data =[]
this.lineOption.series[1].data =[]
this.lineChartDom = document.getElementById('lineChart')
if (this.myLineChart == null) {
this.myLineChart = this.$echarts.init(this.lineChartDom)
}
this.lineOption && this.myLineChart.setOption(this.lineOption)
}
})
},
3.销毁echarts
this.myLineChart.dispose()
八. 自己项目中遇到的问题和解决方法。
1.图tooltips鼠标移入详细信息展示。
主要是利用tooltips这个属性。只要设置一下就会出现默认的展示效果。但是想要自己自定义的就需要利用里面的formatter这个属性。 这个属性只接受字符串。并且echarts给了几个默认的值来自己配置。{a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值。
但一般来说都不适合自己项目产品的设计。所以可以用函数造自己需要的样子。
适合堆叠图。或者多个折线或者柱状图的时候。
formatter: function (params) {
let data = []
params.map(item => {
data.push(`
<div>
<div
style='display: inline-block;
width: 120px;
height: 20px;
color: ${item.color}'
>● ${item.seriesName}:</div>
<span>${item.data}%</span>
</div>`)
})
var str = ''
for (let i = 0; i < data.length; i++) {
str += data[i] + ' '
}
return '销售增长变化情况' + str
}
单个柱状图或者折线图。就是数据只有一条的时候适合这个
formatter: function (params){
console.log(params)
return '活动商品日均销量' + `
<div>
<div
style='display: inline-block;
width: 120px;
height: 20px;
color: ${params[0].color}'
>● ${params[0].name}:</div>
<span>${params[0].data}%</span>
</div>
`
}
2.多条折线图展示
//前面都是处理后端返回的数据
var arr = []
var arr1 = []
res.data.brandGoodsList.map(item => {
item.brandGoodsDateList = item.brandGoodsDateList.map(item => {
{
return ((item - 0) * 100).toFixed(2)
}
})
arr.push(item.brandGoodsName)
arr1.push({
name: item.brandGoodsName,
data: item.brandGoodsDateList,
type: 'line',
label: {
show: true,
}
})
})
arr1.push({
name: '活动商品',
data: res.data.activeGoodsList.map(item => {
{
return ((item - 0) * 100).toFixed(2)
}
}),
type: 'line',
label: {
show: true,
}
})
arr1.push({
name: '平均值',
data: res.data.avgList.map(item => {
{
return ((item - 0) * 100).toFixed(2)
}
}),
type: 'line',
label: {
show: true,
}
})
arr.push('活动商品')
arr.push('平均值')
//后面才是配置。
_this.option = {
title: {
text: '销售增长变化情况'//标题
},
tooltip: {
trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) { //上面说的鼠标移入详情展示
let data = []
params.map(item => {
data.push(`
<div>
<div
style='display: inline-block;
width: 120px;
height: 20px;
color: ${item.color}'
>● ${item.seriesName}:</div>
<span>${item.data}%</span>
</div>`)
})
var str = ''
for (let i = 0; i < data.length; i++) {
str += data[i] + ' '
}
return '销售增长变化情况' + str
}
},
xAxis: { //x轴-一般都是时间
type: 'category',
data: res.data.dateList
},
legend: { //图例，就是每个颜色代表的是啥，配置之后自动出现
right: 10,
data: arr
},
yAxis: { //y轴一般不操作
type: 'value'
},
series: arr1 //主要是这个是多个y轴的数据
}
3.柱状推叠图实现
if (res.data) {
var rawData = []
var series = []
res.data.brandGoodsList.map(item => {
item.brandGoodsDateList = item.brandGoodsDateList.map(item => {
{
return ((item - 0) * 100).toFixed(2)
}
})
rawData.push(item.brandGoodsDateList)
series.push(item.brandGoodsName)
})
rawData.push(res.data.activeGoodsList.map(item => {
{
return ((item - 0) * 100).toFixed(2)
}
}))
series.push('活动商品')
series = series.map((item, index) => {
return {
name: item,
type: 'bar',
stack: 'x',
barWidth: '60%',
label: {
show: true,
},
data: rawData[index]
}
})
this.option2 = {
title: {
text: '市场份额变化情况'
},
legend: {
right: 10,
data: series
},
tooltip: {
trigger: 'axis', //坐 标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
let data = []
params.map(item => {
data.push(`
<div>
<div
style='display: inline-block;
width: 120px;
height: 20px;
color: ${item.color}'
>● ${item.seriesName}:</div>
<span>${item.data}%</span>
</div>`)
})
var str = ''
for (let i = 0; i < data.length; i++) {
str += data[i] + ' '
}
return '市场份额变化情况' + str
}
},
grid: {
left: 100,
right: 100,
top: 50,
bottom: 50
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: res.data.dateList
},
series
}
setTimeout(() => {
_this.getChart2()
}, 800)
}
// 第二个堆叠图
getChart2() {
let chartDom = document.getElementById('chart2')
this.myChart2 = echarts.init(chartDom)
this.option2 && this.myChart2.setOption(this.option2)
},
