| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!DOCTYPE html>
- <head>
- <meta charset="utf-8">
- <title>ECharts</title>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
- <div id="main" style="height:800px"></div>
- <!-- ECharts单文件引入 -->
- <script src="https://www.shadowsocks5.com/build/dist/echarts.js"></script>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths: {
- echarts: 'https://www.shadowsocks5.com/build/dist'
- }
- });
-
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/line',
- 'echarts/chart/bar',
- 'echarts/chart/scatter',
- 'echarts/chart/k',
- 'echarts/chart/pie',
- 'echarts/chart/radar',
- 'echarts/chart/force',
- 'echarts/chart/chord',
- 'echarts/chart/gauge',
- 'echarts/chart/funnel',
- 'echarts/chart/eventRiver',
- 'echarts/chart/venn',
- 'echarts/chart/treemap',
- 'echarts/chart/tree',
- 'echarts/chart/wordCloud',
- 'echarts/chart/heatmap',
- 'echarts/chart/map'
- ],
- function (ec) {
- // 基于准备好的dom，初始化echarts图表
- var myChart = ec.init(document.getElementById('main'));
-
- var option = {
- dataRange: {
- min: 0,
- max: 3000,
- orient: 'horizontal',
- splitNumber: 30,
- color:['#31A829','#D8F6D5'],
- //color:['#1556A1','#136BD4','#6C98D5','#9FCCFF','#DCECFF'],
- x: 'right',
- y: 'top',
- calculable : true
- },
- title: {
- text: '用户分布图',
- left: 'center'
- },
- series : [
- {
- name: 'Map',
- type: 'map',
- mapType: 'china',
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: true
- }
- },
- label: {
- normal: {
- show: true
- },
- emphasis: {
- show: true
- }
- },
- mapLocation: {
- x : 'left',
- y : 'top',
- height : 500
- },
- selectedMode: 'multiple',
- data:[<!--{foreach($china as $k1=>$v1)}-->{
- name: '<!--{$v1}-->',
- value: <!--{$value[$k1]}-->,
- },<!--{/foreach}-->
- ],
- }
- ],
- tooltip : {
- trigger: 'item',
- formatter:'{b}:{c}'
- },
-
- };
-
- // 为echarts对象加载数据
- myChart.setOption(option);
- }
- );
- </script>
- </body>
|
