Echarts 学习

Posted 在今朝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts 学习相关的知识，希望对你有一定的参考价值。

这几天接触Echarts，这是一个开源项目，采用javascript实现图表展示，功能十分强大。

官网 http://echarts.baidu.com/echarts2/index.html 最新版本 http://echarts.baidu.com/index.html

很多介绍都在那里。

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title>ECharts</title>
  6 </head>
  7 <body>
  8     <div id="main" style="height:400px">
  9 
 10     </div>
 11 </body>
 12 </html>
 13 <script src="echarts.js"></script>
 14 <script type="text/javascript">
 15     //官网最简单例子
 16     //配置路径
 17     require.config(
 18     {
 19         paths: {
 20             echarts: ‘http://echarts.baidu.com/build/dist‘
 21         }
 22     })
 23     //使用
 24     require(
 25         [
 26             ‘echarts‘,
 27             ‘echarts/chart/bar‘,// 使用柱状图就加载bar模块，按需加载
 28             ‘echarts/chart/line‘,
 29         ],
 30         function(ec)
 31         {
 32             var myChart = ec.init(document.getElementById(‘main‘)); 
 33 
 34             var option = {
 35                 title: {
 36                     //标题
 37                     text: ‘未来一周气温变化‘,
 38                     //副标题
 39                     subtext: ‘纯属虚构‘
 40                 },
 41                 //横坐标
 42                 tooltip: {
 43                     trigger: ‘axis‘
 44                 },
 45                 //数据说明
 46                 legend: {
 47                     data: [‘最高气温‘, ‘最低气温‘]
 48                 },
 49                 //工具箱
 50                 toolbox: {
 51                     show: true,
 52                     feature: {
 53                         //显示工具箱
 54                         mark: { show: true },
 55                         //数据按钮，点击后显示数据，并只读
 56                         dataView: { show: true, readOnly: false },
 57                         //可以切换线型图和柱状图
 58                         magicType: { show: true, type: [‘line‘, ‘bar‘] },
 59                         //刷新
 60                         restore: { show: true },
 61                         //保存图片
 62                         saveAsImage: { show: true }
 63                     }
 64                 },
 65                 //是否启用拖拽重计算特性，默认关闭
 66                 calculable: true,
 67                 //X坐标内容
 68                 xAxis: [
 69                     {
 70                         //默认值 ‘category‘ | ‘value‘ | ‘time‘ | ‘log‘  坐标轴类型，横轴默认为类目型‘category‘，纵轴默认为数值型‘value‘ 
 71                         type: ‘category‘,
 72                         //类目起始和结束两端空白策略，见下图，默认为true留空，false则顶头 
 73                         boundaryGap: false,
 74                         //X数据内容
 75                         data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘, ‘周五‘, ‘周六‘, ‘周日‘]
 76                     }
 77                 ],
 78                 yAxis: [
 79                     {
 80                         type: ‘value‘,
 81                         //Y数据内容
 82                         axisLabel: {
 83                             formatter: ‘{value} °C‘
 84                         }
 85                     }
 86                 ],
 87                 series: [
 88                     //最高气温数据图
 89                     {
 90                         name: ‘最高气温‘,
 91                         type: ‘line‘,
 92                         data: [11, 11, 15, 13, 12, 13, 10],
 93                         //辅助点，显示最大最小点
 94                         markPoint: {
 95                             data: [
 96                                 { type: ‘max‘, name: ‘最大值‘ },
 97                                 { type: ‘min‘, name: ‘最小值‘ }
 98                             ]
 99                         },
100                         //辅助线
101                         markLine: {
102                             data: [
103                                 { type: ‘average‘, name: ‘平均值‘ }
104                             ]
105                         }
106                     },
107                     //最低气温数据图
108                     {
109                         name: ‘最低气温‘,
110                         type: ‘line‘,
111                         data: [1, -2, 2, 5, 3, 2, 0],
112                         //辅助点，显示最大最小点
113                         markPoint: {
114                             data: [
115                                 { name: ‘周最低‘, value: -2, xAxis: 1, yAxis: -1.5 }
116                             ]
117                         },
118                         //辅助线
119                         markLine: {
120                             data: [
121                                 { type: ‘average‘, name: ‘平均值‘ }
122                             ]
123                         }
124                     }
125                 ]
126             };
127 
128             // 为echarts对象加载数据 
129             myChart.setOption(option);
130         }
131     )
132 </script>

 

以上是关于Echarts 学习的主要内容，如果未能解决你的问题，请参考以下文章

echarts学习总结：一个页面存在多个echarts图形，图形自适应窗口大小

echarts4的学习

ECharts初步学习

图表控件== 百度 echarts的入门学习

ECharts概念学习系列之ECharts结合phpStudy使用（图文详解）

React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」