Echarts 一些基本设置

1. Echarts 图形的在 Vue 中的使用

首先了解 Echarts Echarts的源码是在基于Canvas的ZRender的基础上封装的

1.1 下载和配置

cnpm i echarts --save

在main.js 文件中配置如下

// 导入 Echarts
import echarts from 'echarts'
// 挂载到全局
Vue.prototype.$echarts = echarts

1.2 在项目中使用

<!-- height: 300px 必须给 echarts 设置高度 -->
<div style="height: 300px" ref="getRef"></div>

// 基于准备好的dom，初始化echarts实例, vue 中需要使用 this.$ref 获取
let EchartsRef = this.$refs[getRef]
let myChart = this.$echarts.init(EchartsRef)
// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. Echarts 图形配置显示百分比

百分比显示分为 坐标轴 的百分比显示和 坐标轴指示器(tooltip) 的百分比显示

2.1 坐标轴的百分比显示

echarts 官网配置地址

name 坐标轴的名称
axisLabel坐标轴刻度标签的相关设置
formatter刻度标签的内容格式器，支持字符串模板和回调函数两种形式

yAxis: {
    name: "占比",
    axisLabel: {
        formatter:"{value}%"
    }
},

2.2 坐标轴指示器的百分比显示

echarts 官网配置地址

tooltip 提示框组件
trigger 触发类型 default: "item"
trigger: "item" 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
trigger: "axis"'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
axisPointer坐标轴指示器配置项
type 指示器类型
type: "line" 直线指示器
type: "shadow" 阴影指示器
type: "none" 无指示器
type: "cross" 十字准星指示器。表示启用两个正交的轴的 axisPointer。

tooltip: {
    trigger: "axis",
    formatter: "{b0}<br />{a0}: {c0}%<br />",
    axisPointer: {
        type: "shadow"
    }
},

3. 柱形图的堆叠和图形文字显示

柱形图的堆叠 主要是设置 stack
stack数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。

文字显示设置主要是label echarts 官网配置地址
label图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
position 标签的位置
formatter 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行, 同样可以设置百分比

series: [
	{
	    name: '一季度',
	    type: 'bar',
	    label: {
	        normal: {
	            show: true,
	            position: "inside",
	            formatter: "{c0} 件",
	            color: "#fff"
	        }
	    },
	    stack: "总量",
	    data: [5, 20, 36, 10, 10, 20]
	},
	{
	    name: '二季度',
	    type: 'bar',
	    label: {
	        normal: {
	            show: true,
	            position: "inside",
	            formatter: "{c0}% 件",
	            color: "#fff"
	        }
	    },
	    stack: "总量",
	    data: [5, 20, 36, 10, 10, 20]
	},
]

4. 图例组件显示方式

echarts 官网配置地址

legend图例组件,展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
type 图例的类型
type: 'plain' 普通图例。默认就是普通图例
type: 'scroll'可滚动翻页的图例。当图例数量较多时可以使用
selectedMode 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭

legend: {
	type: "scroll",
    selectedMode: false
},

5. 饼图设置

hoverAnimation是否开启 hover 在扇区上的放大动画效果
legendHoverLink 是否启用图例 hover 时的联动高亮。

 series : [
     {
         name: '姓名',
         type: 'pie',
         radius : '55%',
         center: ['40%', '50%'],
         hoverAnimation: false,
         legendHoverLink: false
     }
]

6. 点击图例 事件处理

myChart.setOption(option);
var triggerAction = function(action, selected) {
     option.legend = [];
     for (name in selected) {
         if (selected.hasOwnProperty(name)) {
             option.legend.push({ name: name });
         }
     }
     myEcharts.dispatchAction({
         type: action,
         batch: option.legend
     });
 };
 // 是否选中其中一个
var isOneUnSelect = function(selected) {
    var unSelectedCount = 0;
    for (name in selected) {
        if (!selected.hasOwnProperty(name)) {
            continue;
        }
        if (selected[name] == false) {
            ++unSelectedCount;
        }
    }
    return unSelectedCount == 1;
};
myChart.on("legendselectchanged", obj => {
    var selected = obj.selected;
    var legend = obj.name;
    if (selected != undefined) {
        if (isOneUnSelect(selected)) {
            triggerAction("legendSelect", selected);
            // 书写 逻辑处理 
        }
    }
});

7. 柱形图 点击柱子事件处理

myChart.setOption(option);
// Echarts柱形图点击柱子进行操作
myChart.getZr().on("click", params => {
    const pointInPixel = [params.offsetX, params.offsetY];
    if (myChart.containPixel("grid", pointInPixel)) {
        let xIndex = myChart.convertFromPixel(
            { seriesIndex: 0 },
            [params.offsetX, params.offsetY]
        )[0]; 
        /*事件处理代码书写位置*/
        // this.sonGetData[getEchartsXDataName] 为 X轴 的数据
        this.sonGetData[getEchartsXDataName].forEach(
            (item, index) => {
                if (index == xIndex) {
                    let legend = item;
                    // 事件处理代码书写位置
                }
            }
        );
    }
});

8. echarts 自适应屏幕改变

mounted() {
    window.addEventListener("resize", this.EchartsResize, 20);
},
methods: {
	// 自适应屏幕
	EchartsResize() {
	   this.$echarts.init(this.$refs[getRef]).resize();
	}
},
destroyed() {
    window.removeEventListener("resize", this.EchartsResize, 20);
}

9. 小知识

9.1 渲染残留

有时候出现渲染残留的问题, 可以在初始化之前清除掉之前残留的Echarts

// 清除掉之前残留的Echarts
myChart.clear();
myChart.setOption(option);

9.2 主题配置

首先在main.js 中导入自定义的主题

// 引入自定义的echarts的主题
import 'echarts/theme/customed'

在需要改变主题的地方

// 可能存在 主题渲染残留 先清除
this.$echarts.init(this.$refs[getColumnRef]).dispose();
//  getTheme 填入 需要的主题名称 customed
var myChart = this.$echarts.init(this.$refs[getColumnRef],getTheme);
// 清除掉之前残留的Echarts  
myChart.clear();
myChart.setOption(option);