Echarts.js简介

Posted 2023-05-08

参考技术A

在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。
Echarts.js是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。

https://echarts.apache.org/zh/index.html
官网首页有着很多实例以及相关介绍，获取echart.js可以从本人百度网盘获取，包含所有图表组件，可直接引用。

链接： https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA

提取码：aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据

VUE项目中按需引入ECharts.js

安装ECharts包

npm install echarts --save

引入 ECharts

　　在main.js中引入

 1 // 引入 ECharts 主模块
 2 let echarts = require(‘echarts/lib/echarts‘);
 3 // 引入折线图/柱状图等组件
 4 require(‘echarts/lib/chart/line‘)
 5 require(‘echarts/lib/chart/bar‘)
 6 require(‘echarts/lib/chart/radar‘)
 7 // 引入提示框和title组件，图例
 8 require(‘echarts/lib/component/tooltip‘)
 9 require(‘echarts/lib/component/title‘)
10 require(‘echarts/lib/component/legend‘)
11 require(‘echarts/lib/component/legendScroll‘)//图例滚动
12 //vue全局注入echarts
13 Vue.prototype.$echarts = echarts

使用它----在xx.vue文件中

1. • 准备容器

     • <div id="myChart" :style="width: ‘420px‘, height: ‘900px‘"></div>

   • js代码

     •  1 //初始化echart对象
        2 let myChart = this.$echarts.init(document.getElementById(‘myChart‘));
        3 //配置echart
        4 myChart.setOption(
        5     grid: //整体位置
        6         top: ‘40‘,
        7         right: ‘8%‘,
        8         left: ‘12%‘,
        9         bottom: 36,
       10     ,
       11     backgroundColor: ‘#fff‘,
       12     xAxis: 
       13         type: ‘value‘,//类型--数值表
       14         position: ‘top‘,//位置
       15         boundaryGap : 0,//坐标轴两侧留白
       16         offset: 8,//X轴偏移
       17         axisLine : //坐标轴轴线
       18             show: 0,
       19         ,
       20         axisTick : show: 0,//坐标轴刻度
       21         splitLine : show: 0,//坐标轴grid区分割线
       22         data: [‘10‘, ‘20‘, ‘30‘, ‘40‘],//X轴刻度
       23     ,
       24     yAxis: 
       25         type: ‘category‘,//类型--类目表
       26         name:‘期数‘,
       27         nameLocation: ‘start‘, //轴名位置
       28         nameTextStyle: //Y轴名称
       29             color: ‘#f00‘,
       30         ,
       31         offset: 8,//Y轴偏移
       32         nameGap: 15,//轴名距离
       33         inverse: 1,//反转
       34         boundaryGap : 0,//坐标轴两侧留白
       35         axisLine : show: 0,//坐标轴轴线
       36         axisTick : show: 0,//坐标轴刻度
       37         splitLine : //坐标轴grid区分割线
       38             show: 1,
       39             lineStyle:
       40                 color: ‘#dcdcdc‘
       41             
       42         ,
       43         data: [1,2,3,4],//y轴刻度
       44     ,
       45     series: [
       46         data: [23,24,25,26],//数据--将按照类目表依次排列
       47         type: ‘line‘,//折线图
       48         label: //标签
       49             show: 1,
       50             position: ‘insideTopLeft‘,
       51             distance: 12,
       52             color: ‘#000‘,
       53             fontSize: 14,
       54         ,
       55         itemStyle://标记拐点颜色
       56             color: (param)=>
       57                 return function(param)....
       58             
       59         ,
       60         symbol: ‘circle‘,//标记-实心圆
       61         symbolSize: 10,//标记-大小
       62         lineStyle:color:‘#ccc‘,,//line样式
       63     ]
       64 );

        

   • 上面的js代码可整合成函数,方便使用和重绘.重绘时,EChart会复用可用部分,使图形进行变化.

   • ECharts官网 https://www.echartsjs.com/option.html#title