Fork me on GitHub

echarts 基础使用

字数统计: 1.5k字   |   阅读时长≈ 8分

Echarts

关于Echarts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

开始使用

下载echarts

  1. 从官网下载

    https://echarts.apache.org/zh/download.html

  2. npm 安装

    npm install echarts

引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        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);
    </script>
</body>
</html>

使用技巧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//封装函数
function pieTest(domId, dataList = {}) { // 默认值
        let domEle = document.getElementById(domId)
        if(!domEle) return
        // 解决重复渲染造成的事件叠加
        if (domEle.echartDom2) {
            domEle.echartDom2.dispose();
        }
        let data = {
            data1: dataList.data1 || []
        }
        let options = {
            tooltip: {},
            grid: {
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            },
            legend: {
                show: false
            },
            series: [{
                    type: 'pie',
                    center: ['40%', '50%'],
                    radius: '60%',
                    z: 10,
                    minAngle: 45,
                    labelLine: {
                        show: false,
                    },
                    itemStyle: {
                        borderWidth: 1
                    },
                    label: {
                        show: true,
                        fontSize: 12,
                        align: 'left',
                        color: '#fff',
                        position: 'inner',
                        formatter: (params) => {
                            return `${params.data.name}${params.data.value}`
                        }
                    },
                    data: data.data1
                },
                {
                    type: 'pie',
                    color: ['rgb(0,150,148)', 'rgb(174,149,232)'],
                    center: ['40%', '50%'],
                    radius: '60%',
                    z: 2,
                    labelLine: {
                        show: true,
                        color: '#fff',
                        length: 20,
                        length2: 60
                    },

                    label: {
                        show: true,
                        fontSize: 12,
                        align: 'left',
                        color: '#fff',
                        padding: [10, -65, 25, -65],
                        formatter: (params) => {
                            return `${params.data.name}站：${params.data.value}`
                        }

                    },
                    data:data.data2
                }
            ]
        };
        domEle.echartDom2 = echarts.init(document.getElementById(domId))
        domEle.echartDom2.setOption(options)
        
        // 初始化调整大小
        setTimeout(() => {
            domEle.echartDom2.resize()
        }, 500)
        // 不同屏幕自适应
        $(window).on("resize", () => {
            try {
                domEle.echartDom2.resize()
            } catch (error) {
                
            }
        })
    }
//调用
pieTest1('pie1',{title:'今日预测承载力前三单位',percent:true});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
drawChartClsyl(chartData = []){
    let that = this;
    let htmlDom = document.querySelector('.chart-clsyl')
    if(!htmlDom) return
    let tempData = {
        xAxis:['xxx'],
        count:[{value:0, useRate: 0}],
    }
    
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(255,255,255,0)' // 0% 处的颜色
                        }, {
                            offset: 0.5,
                            color: 'rgba(255,255,255,1)' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
            
        },
        grid: {
            
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: "white"
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                interval: 0,
                rotate:38,
                textStyle: {
                    color: '#fff',
                    margin: 15,
                },
                formatter: function(data) {
                    return data;
                }
            },
            axisTick: {
                show: false,
            },

            data: tempData.xAxis
        }],
        yAxis: [{
            min: 0,
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine:{
                show:false
            }
        }],
        series: [{
            name: `车辆使用率`,
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 8,
            data: tempData.count
        }]
    };
    if(!isDepModel) {
        option.yAxis[0].max = 100
    }
    // 更新
    if(echarts.getInstanceByDom(htmlDom)) {
        this.chartClsyl.clear()
        return this.chartClsyl.setOption(option);
    }
    this.chartClsyl = echarts.init(htmlDom);
    this.chartClsyl.setOption(option);
}

// 监听重载事件
resizeChart() {
    this.chartClsyl&&this.chartClsyl.resize()
}
document.addEventListener('resize', this.resizeChart)

vue 版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
	<div class="DataChartLine">
        <div :style="{width: data.width, height: data.height}" class="echartsBox" id="data.id"></div>
    </div>
</template>

<script >
    export default {
        name: 'DataChartLine',
        props: {
            data: {
                type: Object,
                required: true
            }
        },
        mounted() {
            this.initEchart()
        },
        methods: {
            initEchart() {
                let echarts = this.$echarts;
                let htmlDom = document.getElementById(data.id);
                if(!htmlDom) return
                let option = {
                    tooltip: {},
                    grid: {},
                    legend: {},
                    xAxis: {},
                    yAxis: {},
                    series: []
                    
                }
                if(data.options) {
                    option = Object.assign(option, data.options)
                }
                data.seriesData.forEach((item, index) {
                    option.series.push({
                        name: (name.legendData && data.legendData.length) ? data.legendData[i] : null;                    
                        type: 'line',
                         data: data.seriesData[i]
                    })              
                })
                this.myChart && myChart.clear();
                this.myChart.setOption(option)
            }
        }
    }
</script>

遇见的问题

鼠标移入饼图时饼图出现闪动，移入部分看不见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
原因：新版本修改默认颜色的配置不一样了

1、老版本中
options = {
    //通过color 设置默认色盘
    color: ['rgb(50 206 253)', 'rgb(199 195 26)', 'rgb(197 63 63)']
}

2、新版本中
要在 pie 的ItemStyle 中设置 color,[重点] 返回 new echarts.graphic.LinearGradient()

color : function(params) {
    var colorList = ['rgb(50 206 253)', 'rgb(199 195 26)', 'rgb(197 63 63)'];      
    var newcolorList = ['rgb(50 206 253)', 'rgb(199 195 26)', 'rgb(197 63 63)'];
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: colorList[params.dataIndex]
    },
    {
        offset: 1,
        color: newcolorList[params.dataIndex]
    }])
}

echarts-gl

ECharts-GL 是Apache ECharts的扩展包，提供 3D 绘图、地球可视化和 WebGL 加速。

引入方式1

1
2
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

引入方式2

全部导入

1
2
import * as echarts from 'echarts';
import 'echarts-gl';

最小进口

1
2
3
4
5
import * as echarts from 'echarts/core';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';

echarts.use([Scatter3DChart, Grid3DComponent]);

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。