echarts( 数据可视化) 属于h5新增内容

echarts : Apache ECharts 一个基于 JavaScript 的开源可视化图表库（必须借助于第三方插件，需要引入js里面才能用，要不然没办法实现效果）

五分钟上手教程：

1. 引入echarts.js 文件

      <script src="./js/echarts.js"></script>

2. 为图表创建一个固定宽高的容器

　　html

          <div id="mycharts" ></div>

　　　　css

1      #mycharts{
2                     width: 600px;
3                     height: 600px;
4                     border:1px solid red;
5                 }

3. 创建图表的实例化对象初始化图表

通过图表容器的dom对象进行初始化操作

1                 let container = document.querySelector('#mycharts')
2                 const mycharts = echarts.init(container);

4. 创建图表的配置项

 1 let option = {
 2                     xAxis:{
 3                          data:['周一', '周二', '周三']
 4                     },
 5                     yAxis:{},
 6                     series:[
 7                         {
 8                             type:'bar',
 9                             data:[100, 50, 120]
10                         }
11                     ]
12                 }

5. 设置图表数据项显示

js:

   mycharts.setOption(option)

案例如下：

css:

 1 .warp,
 2         .arr,
 3         .third,
 4         .fourth {
 5             display: inline-block;
 6             width: 500px;
 7             height: 500px;
 8             box-shadow: 0 0 10px 10px yellow;
 9 
10         }
11 
12         .arr {
13             margin-left: 50px;
14         }
15 
16         .www {
17             width: 1200px;
18             margin: 200px auto;
19 
20         }

html:

1 <div class="www">
2         <div class="warp"></div>
3         <div class="arr"></div>
4     </div>
5     <div class="third"></div>
6     <div class="fourth"></div>

js:

  1   <script src="./echarts引入文件/echarts.js"></script>
  2     <script>
  3         let warp = document.querySelector('.warp');
  4 
  5         // 创建 echarts 的实例化对象 
  6         let warp1 = echarts.init(warp);
  7 
  8 
  9         // 指定配置项 树状图
 10         let option = {
 11             title: {
 12                 text: '508总体汇总',
 13                 textStyle: {
 14                     fontSize: 23,
 15                     color: 'pink',
 16                     textBorderColor: '#000',
 17                     textBorderWidth: 2, // 字体边界的宽的粗细 因为必须有这个上面的#000才能生效
 18                     textBorderType: "dotted" // 描边的类型
 19 
 20                 }
 21             },
 22             tooltip: {}, // 提示组件
 23             legend: {
 24                 //  数组中的元素就是图例的名字
 25                 data: ['经济比', '闷骚比', '体重比']
 26             },
 27             xAxis: {
 28                 data: ['上海张总', '西安坤总', '郑州李总', 'oo哥', '丁总', '胜弟弟']
 29             },
 30             // y轴不用配置 默认跟随
 31             yAxis: {},
 32             // 配置数据系列
 33             series: [
 34                 {
 35                     type: 'bar',
 36                     name: '经济比',
 37                     data: [300, 280, 270, 290, 280, 20]
 38                 },
 39                 {
 40                     type: 'bar',
 41                     name: '闷骚比',
 42                     data: [160, 240, 230, 320, 230, 25]
 43                 },
 44                 {
 45                     type: 'bar',
 46                     name: '体重比',
 47                     data: [180, 140, 130, 150, 130, 145]
 48                 }
 49             ]
 50         }
 51         // 5. 设置图表数据项显示
 52         warp1.setOption(option)
 53 
 54 
 55         // 设置饼状图
 56         let arr = document.querySelector('.arr');
 57         let arr1 = echarts.init(arr);
 58 
 59         let option1 = {
 60             toolbar: {},
 61             series: [
 62                 {
 63                     type: 'pie', // 表示饼状图 配置饼状图不需要依赖于直角坐标系（xAxis和 yAxis）
 64                     roseType: 'area', // 表示饼状图里面的南丁格尔图 如果设置的area的话圆心角会相等仅用半径的大小代表比例  如果是radius的话圆心角会代表比例而且半径的大小也会代表比例
 65                     itemStyle: {
 66                         borderRadius: 20
 67                     },
 68                     center: [200, 300], // 圆心的坐标 200代表水平方向 300 垂直方向
 69                     radius: [0, '40%'], // 指定饼图的半径范围 如果是20%-40% 那么圆的中心会变空 如果从0开始 则为扇形
 70                     data: [
 71                         //  每个数据项的详细配置
 72                         {
 73                             name: '三丰',
 74                             value: 180
 75                         },
 76                         {
 77                             name: '坤坤',
 78                             value: 160
 79                         },
 80                         {
 81                             name: '航仔',
 82                             value: 160
 83                         },
 84                         {
 85                             name: '蛋蛋后',
 86                             value: 170
 87                         },
 88                         {
 89                             name: '小丁丁',
 90                             value: 160
 91                         },
 92                         {
 93                             name: '大圣',
 94                             value: 30
 95                         }
 96                     ]
 97                 }
 98             ]
 99 
100         }
101         arr1.setOption(option1)
102 
103 
104         // 设置雷达图
105         let third = document.querySelector('.third');
106         let third1 = echarts.init(third);
107         let option2 = {
108             // 定义雷达图的坐标系
109             radar: {
110                 // 逆时针显示数据
111                 indicator: [
112                     {
113                         name: '推理力',
114                         max: 100
115                     },
116                     {
117                         name: '观察力',
118                         max: 200
119                     },
120                     {
121                         name: '记忆力',
122                         max: 150
123                     },
124                     {
125                         name: '思维力',
126                         max: 300
127                     },
128                     {
129                         name: '抽象力',
130                         max: 220
131                     },
132                 ]
133             },
134             series: [
135                 {
136                     type: 'radar',
137                     //  填充色  整体的
138                     // areaStyle:{
139                     //     color:'pink',
140                     // },
141                     data: [
142                         {
143                             value: [90, 110, 120, 200, 190],
144                             //  针对单独数据设置填充色
145                             areaStyle: {
146                                 color: 'pink'
147                             }
148                         },
149                         {
150                             value: [60, 160, 100, 260, 130],
151                             areaStyle: {
152                                 color: 'orange'
153                             }
154                         }
155                     ]
156                 }
157             ]
158         }
159         third1.setOption(option2)
160 
161 
162         // 动态渲染图形
163         let fourth = document.querySelector('.fourth');
164         let fourth1 = echarts.init(fourth);
165         //  动态渲染数据
166         let option3 = {
167             xAxis: {
168                 data: ['周一', '周二', '周三', '周四', '周五']
169             },
170             yAxis: {},
171             series: [
172                 {
173                     type: 'line',
174                     areaStyle: {
175                         color: 'pink',
176                     },
177                     smooth: true, // 表示折线边存在光滑
178                     opacity: 0.8,
179                     data: [100, 23, 123, 345, 213]
180                 },
181                 {
182                     type: 'line',
183                     areaStyle: {
184                         color: 'green',
185                     },
186                     opacity: 0.8,
187                     data: [100, 23, 123, 345, 213]
188                 }
189             ]
190         }
191 
192         fourth1.setOption(option3)
193 
194         //  动态渲染数据  模拟展示 
195         let timer = setInterval(function () {
196             let arr = [], arr1 = [];
197             for (let i = 0; i < 5; i++) {
198                 arr.push(parseInt((Math.random() * 200)))
199                 arr1.push(parseInt((Math.random() * 200)))
200             }
201             // 数据改变 重新调用执行 setOption() 
202             fourth1.setOption({
203                 series: [
204                     {
205                         type: 'line',
206                         data: arr
207                     },
208                     {
209                         type: 'line',
210                         data: arr1
211                     }
212                 ]
213             })
214         }, 1000)
215     </script>

posted @ 2022-05-19 15:18 请善待容嬷嬷阅读(384) 评论(0) 编辑收藏举报

刷新页面返回顶部

crj

echarts( 数据可视化) 属于h5新增内容

公告