配置Echarts大全

由于项目中需要用到Echarts，最近研究了一个星期。网上的教程也挺多的。磕磕碰碰的，难找到合适的例子。都说的马马虎虎。不废话了。开始吧。

这种上下排列的。。。

还有这种地图的。（如下）

还有就是配置的问题。（从echarts官网看例子。但是不能直接打开。如何在本地打开。）

我研究了一套非常好的配置方案。如下。

1.准备一个盒子，<div id="main1" style="width: 1600px;height:400px;"></div>

2.引入js 。 <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

3 .

// 路径配置开始
require.config({
　　paths: {
　　　　echarts: 'http://echarts.baidu.com/build/dist'
　　}
});

// 路径配置结束

// 使用柱状图就加载bar模块，按需加载
require(
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);

// 函数调用
function drawEcharts(ec){
drawBar(ec);
drawBar2(ec);
drawBar3(ec);
drawBar4(ec);
　你在一个页面中，弄了几个echarts图表。你就弄几个函数。　
}

5. 具体的函数。

函数一： function drawBar(ec){

var myBarChart = ec.init(document.getElementById('main1'));

var option = {}

myBarChart.setOption(option,true);

}

函数二：。。。。。。。。。。。。可以写n个。记得调用。然后html里弄n个盒子。一个盒子对应一个函数。这就是整体怎么使用的。

难点二。怎么给柱子添加点击跳转。下面是公司给的设计稿。

点击柱子。跳转到指定页面。

在你做的drawBar函数内部。加上如下代码

var ecConfig = require('echarts/config');
function eConsole(param) {
switch (param.dataIndex) {
case 0: //柱子1
window.location.href = "stSubject.html";
break;
case 1: //柱子2
window.location.href = "stSubject.html";
break;
case 2: //柱子3
window.location.href = "stSubject.html";
break;
case 3: //柱子3
window.location.href = "stSubject.html";
break;
case 4: //柱子3
window.location.href = "stSubject.html";
break;
case 5: //柱子3
window.location.href = "stSubject.html";
break;

default:
break;
}
}
myBarChart.on(ecConfig.EVENT.CLICK, eConsole);

就实现了跳转。

完整代码如下。复制到本地，既可看到效果。（b不需要你下载任何js库）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/reset.css" rel="stylesheet">

<link  href="css/tongji.css" rel="stylesheet" >

</head>

<body>

<div class="statistcs">

<div class="content clearfix">

    <div class="right-box fl right-box1">

        <div class="item item1" id="item1"><div id="main1" style="width: 1600px;height:400px;"></div></div>

    </div>

</div>

</div>

<!-- <script src="js/bootstrap.js"></script> -->

<!-- <script src="js/jquery.js"></script> -->

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

<!-- <script src="js/common.js"></script> -->

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script>

// 路径配置

require.config({

　　paths: {

　　　　echarts: 'http://echarts.baidu.com/build/dist'

　　}

});

  // 使用柱状图就加载bar模块，按需加载

  require(

　　　　　　[

　　　　　　　　'echarts',

　　　　　　　　'echarts/chart/bar',

　　　　　　　　'echarts/chart/line'

　　　　　　],

　　　　　　drawEcharts

);

  // 函数调用

  function drawEcharts(ec){

　　drawBar(ec);　

}

function drawBar(ec){

　　var myBarChart = ec.init(document.getElementById('main1'));

      var option = {

            color:['#1f67df'],

            // default:[ false ],

            title: {

               show:true,

               left:'50%',

               backgroundColor:'transparent',//标题的背景颜色

               text: '作业量',

            },

            grid:{

                show:true,

                left:'10%',

                containLabel:true,

                backgroundColor:"#fff",

            },

            tooltip: {},

            // legend: {},

                 xAxis : [

                {

                    splitLine:{show: true},//去除网格线

                    type : 'category',

                    data: ["五班","八班","十六班","","","","","","","","","",""],

                    // splitArea : {show : true}//保留网格区域

                }

            ],

             yAxis : [

                {

                    splitLine:{show: true},//去除网格线

                    type : 'value',

                    // splitArea : {show : true}//保留网格区域

                }

            ],

            series: [{

                name: '作业量',

                type: 'bar',

                // barWidth:"30%",

                data: [, , , , , , , , , , , , ]

            }]

        };

myBarChart.setOption(option,true);

  /* 给柱状图绑定click事件 */

    var ecConfig = require('echarts/config');

    function eConsole(param) {

        switch (param.dataIndex) {

            case :    //柱子1

                window.location.href = "https://www.baidu.com/";

                break;

            case :  //柱子2

                window.location.href = "https://www.baidu.com/";

                break;

            case :  //柱子3

                window.location.href = "https://www.baidu.com/";

                break;

            case :  //柱子3

                window.location.href = "https://www.baidu.com/";

                break;

            case :  //柱子3

                window.location.href = "https://www.baidu.com/";

                break;

            case :  //柱子3

                window.location.href = "https://www.baidu.com/";

                break;

            default:

                break;

        }

    }

    myBarChart.on(ecConfig.EVENT.CLICK, eConsole);

      /* 给柱状图绑定click事件 */

}

</script>

这样。就能实现跳转啦。

难点二。如何把官网的例子在本地运行。

1 准备盒子。<div id="main" style="width: 1200px;height:800px;"></div>

2 引入这两个js 。。china.js是地图。务必引入。

2.5 或者可以引入china.json

这个需要配置如下代码：

//引入json地图

// $.get('json/china.json', function (chinaJson) {

// echarts.registerMap('china', chinaJson);

// });

3步：var myChart = echarts.init(document.getElementById('main'));

4部。就是把下载过来的代码粘贴到js中

官网的数据一般是这样的：

 var data = []
var geoCoordMap =[]

var convertedData = [
convertData(data),
convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 6))
];
data.sort(function(a, b) {
return a.value - b.value;
})

data: data
}]
};

function renderBrushed(params) {
var mainSeries = params.batch[0].selected[0];

var selectedItems = [];
var categoryData = [];
var barData = [];
var maxBar = 30;
var sum = 0;
var count = 0;

for (var i = 0; i < mainSeries.dataIndex.length; i++) {
var rawIndex = mainSeries.dataIndex[i];
var dataItem = convertedData[0][rawIndex];
var pmValue = dataItem.value[2];

sum += pmValue;
count++;

selectedItems.push(dataItem);
}

selectedItems.sort(function(a, b) {
// return b.value[2] - a.value[2];
return a.value - b.value;
});

for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[2]);
}

this.setOption({
yAxis: {
data: categoryData
},
xAxis: {
axisLabel: {
show: !!count
}
},
title: {
id: 'statistic',
text: count ? '平均: ' + (sum / count).toFixed(4) : ''
},
series: {
id: 'bar',
// sort:'descending',
data: barData
}
});
}

最后。

myChart.setOption(option)

下面是整个代码。（复制到本地就能运行）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 引入 ECharts 文件 -->

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

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

    <script src="js/jquery-1.9.1.js"></script>

</head>

<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="main" style="width: 1200px;height:800px;"></div>

<script type="text/javascript">

//引入json地图

    // $.get('json/china.json', function (chinaJson) {

    //     echarts.registerMap('china', chinaJson);

    // });

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

   var data = [

    { name: "上海", value: },

    { name: "珠海", value: },

    { name: "三亚", value: },

    { name: "惠州", value: },

    { name: "海口", value: },

    { name: "合肥", value: },

    { name: "南京", value: },

    { name: "杭州", value: },

    { name: "苏州", value: },

    { name: "无锡", value: },

    { name: "昆山", value: },

    { name: "广州", value: },

    { name: "深圳", value: },

    { name: "佛山", value: },

    { name: "东莞", value: },

    { name: "福州", value: },

    { name: "厦门", value: },

    { name: "南宁", value: },

    { name: "郑州", value: },

    { name: "武汉", value: },

    { name: "长沙", value: },

    { name: "南昌", value: },

    { name: "北京", value: },

    { name: "长春", value: },

    { name: "大连", value: },

    { name: "沈阳", value: },

    { name: "哈尔滨", value: },

    { name: "天津", value: },

    { name: "济南", value: },

    { name: "青岛", value: },

    { name: "太原", value: },

    { name: "石家庄", value: },

    { name: "西安", value: },

    { name: "成都", value: },

    { name: "重庆", value: },

    { name: "昆明", value: },

];

var geoCoordMap = {

    "上海": [121.48, 31.22],

    "珠海": [113.52, 22.3],

    "三亚": [109.31, 18.14],

    "惠州": [114.4, 23.09],

    "海口": [110.35, 20.02],

    "合肥": [117.27, 31.86],

    "南京": [118.78, 32.04],

    "杭州": [120.19, 30.26],

    "苏州": [120.62, 31.32],

    "无锡": [120.29, 31.59],

    "昆山": [120.95, 31.39],

    "广州": [113.23, 23.16],

    "深圳": [114.07, 22.62],

    "佛山": [113.11, 23.05],

    "东莞": [113.75, 23.04],

    "福州": [119.3, 26.08],

    "厦门": [118.1, 24.46],

    "南宁": [108.33, 22.84],

    "郑州": [113.65, 34.76],

    "武汉": [114.31, 30.52],

    "长沙": [, 28.21],

    "南昌": [115.89, 28.68],

    "北京": [116.46, 39.92],

    "长春": [125.35, 43.88],

    "大连": [121.62, 38.92],

    "沈阳": [123.38, 41.8],

    "哈尔滨": [126.63, 45.75],

    "天津": [117.2, 39.13],

    "济南": [, 36.65],

    "青岛": [120.33, 36.07],

    "太原": [112.53, 37.87],

    "石家庄": [114.48, 38.03],

    "西安": [108.95, 34.27],

    "成都": [104.06, 30.67],

    "重庆": [106.54, 29.59],

    "昆明": [102.73, 25.04],

};

var convertData = function(data) {

    var res = [];

    for (var i = ; i < data.length; i++) {

        var geoCoord = geoCoordMap[data[i].name];

        if (geoCoord) {

            res.push({

                name: data[i].name,

                value: geoCoord.concat(data[i].value)

            });

        }

    }

    return res;

};

var convertedData = [

    convertData(data),

    convertData(data.sort(function(a, b) {

        return b.value - a.value;

    }).slice(, ))

];

data.sort(function(a, b) {

    return a.value - b.value;

})

var selectedItems = [];

var categoryData = [];

var barData = [];

//   var maxBar = 30;

var sum = ;

var count = data.length;

for (var i = ; i < data.length; i++) {

    categoryData.push(data[i].name);

    barData.push(data[i].value);

    sum += data[i].value;

}

console.log(categoryData);

console.log(sum + "   " + count)

option = {

    backgroundColor: '#404a59',

    animation: true,

    animationDuration: ,

    animationEasing: 'cubicInOut',

    animationDurationUpdate: ,

    animationEasingUpdate: 'cubicInOut',

    title: [{

        text: '全国用电量对比',

        link: 'http://pages.anjuke.com/expert/newexpert.html',

        subtext: 'data from Anjuke',

        sublink: 'http://pages.anjuke.com/expert/newexpert.html',

        left: 'center',

        textStyle: {

            color: '#fff'

        }

    }, {

        id: 'statistic',

        text: count ? '平均: ' + parseInt((sum / count).toFixed()) : '',

        right: ,

        top: ,

        width: ,

        textStyle: {

            color: '#fff',

            fontSize:

        }

    }],

    toolbox: {

        iconStyle: {

            normal: {

                borderColor: '#fff'

            },

            emphasis: {

                borderColor: '#b1e4ff'

            }

        },

        feature: {

            dataZoom: {},

            brush: {

                type: ['rect', 'polygon', 'clear']

            },

            saveAsImage: {

                show: true

            }

        }

    },

    brush: {

        outOfBrush: {

            color: '#abc'

        },

        brushStyle: {

            borderWidth: ,

            color: 'rgba(0,0,0,0.2)',

            borderColor: 'rgba(0,0,0,0.5)',

        },

        seriesIndex: [, ],

        throttleType: 'debounce',

        throttleDelay: ,

        geoIndex:

    },

    geo: {

        map: 'china',

        left: '',

        right: '35%',

        center: [117.98561551896913, 31.205000490896193],

        zoom: 1.5,

        label: {

            emphasis: {

                show: false

            }

        },

        roam: true,

        itemStyle: {

            normal: {

                areaColor: '#323c48',

                borderColor: '#111'

            },

            emphasis: {

                areaColor: '#2a333d'

            }

        }

    },

    tooltip: {

        trigger: 'item'

    },

    grid: {

        right: ,

        top: ,

        bottom: ,

        width: '30%'

    },

    xAxis: {

        type: 'value',

        scale: true,

        position: 'top',

        boundaryGap: false,

        splitLine: {

            show: false

        },

        axisLine: {

            show: false

        },

        axisTick: {

            show: false

        },

        axisLabel: {

            margin: ,

            textStyle: {

                color: '#aaa'

            }

        },

    },

    yAxis: {

        type: 'category',

        //  name: 'TOP 20',

        nameGap: ,

        axisLine: {

            show: true,

            lineStyle: {

                color: '#ddd'

            }

        },

        axisTick: {

            show: false,

            lineStyle: {

                color: '#ddd'

            }

        },

        axisLabel: {

            interval: ,

            textStyle: {

                color: '#ddd'

            }

        },

        data: categoryData

    },

    series: [{

        // name: 'pm2.5',

        type: 'scatter',

        coordinateSystem: 'geo',

        data: convertedData[],

        symbolSize: function(val) {

            return Math.max(val[] / , );

        },

        label: {

            normal: {

                formatter: '{b}',

                position: 'right',

                show: false

            },

            emphasis: {

                show: true

            }

        },

        itemStyle: {

            normal: {

                color: '#FF8C00',

                position: 'right',

                show: true

            }

        }

    }, {

        //  name: 'Top 5',

        type: 'effectScatter',

        coordinateSystem: 'geo',

        data: convertedData[],

        symbolSize: function(val) {

            return Math.max(val[] / , );

        },

        showEffectOn: 'render',

        rippleEffect: {

            brushType: 'stroke'

        },

        hoverAnimation: true,

        label: {

            normal: {

                formatter: '{b}',

                position: 'right',

                show: true

            }

        },

        itemStyle: {

            normal: {

                color: '#f4e925',

                shadowBlur: ,

                shadowColor: '#EE0000'

            }

        },

        zlevel:

    }, {

        id: 'bar',

        zlevel: ,

        type: 'bar',

        symbol: 'none',

        itemStyle: {

            normal: {

                color: '#ddb926'

            }

        },

        data: data

    }]

};

function renderBrushed(params) {

    var mainSeries = params.batch[].selected[];

    var selectedItems = [];

    var categoryData = [];

    var barData = [];

    var maxBar = ;

    var sum = ;

    var count = ;

    for (var i = ; i < mainSeries.dataIndex.length; i++) {

        var rawIndex = mainSeries.dataIndex[i];

        var dataItem = convertedData[][rawIndex];

        var pmValue = dataItem.value[];

        sum += pmValue;

        count++;

        selectedItems.push(dataItem);

    }

    selectedItems.sort(function(a, b) {

        //   return b.value[2] - a.value[2];

        return a.value - b.value;

    });

    for (var i = ; i < Math.min(selectedItems.length, maxBar); i++) {

        categoryData.push(selectedItems[i].name);

        barData.push(selectedItems[i].value[]);

    }

    this.setOption({

        yAxis: {

            data: categoryData

        },

        xAxis: {

            axisLabel: {

                show: !!count

            }

        },

        title: {

            id: 'statistic',

            text: count ? '平均: ' + (sum / count).toFixed() : ''

        },

        series: {

            id: 'bar',

            //        sort:'descending',

            data: barData

        }

    });

}

    myChart.setOption(option)

</script>

</body>

</html>

配置Echarts大全的更多相关文章

关于vue中如何配置echarts以及使用方法
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
知识点4: 配置echarts折线图和饼图
折线图效果图 html <template> <div id="v11-charts3"></div> </template> j ...
webpack 配置echarts 按需加载
引入babel-plugin-equire插件,方便使用.yarn add babel-plugin-equire -D 在.babelrc文件中的配置 { "presets": ...
asp.net中web.config配置节点大全详解
最近网上找了一些关于Web.config配置节点的文章,发现很多都写的都比较零散,而且很少有说明各个配置节点的作用和用法.搜索了一下发现有一篇写的不错,这里引用一下原文地址 http://www.c ...
AndroidManifest.xml 配置权限大全
问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限获取错略位置 android.permissi ...
asp.net中web.config配置节点大全详解【转】
web.config 文件查找规则: (1)如果在当前页面所在目录下存在web.config文件,查看是否存在所要查找的结点名称,如果存在返回结果并停止查找. (2)如果当前页面所在目录下不存在web ...
自制OSPF配置实验大全
OSPF综合实验(gns模拟器) 注意点: Ospf实验推荐用gns制作 //图中的交换机可以视觉忽略或缩小成一个点.(^ v^) Ospf 实验拓扑图目录 OSPF综合实验... 1 Os ...
自制EIGRP配置实验大全
EIGRP综合实验本实验可能会有一两个出错的地方,希望大家进行实验测试后,可以指正!当然绝大部分都是正确滴! 实验A:基本配置 A.0)实验目的: 熟悉eigrp的基本配置 A.1)实验拓扑: A. ...
consul配置参数大全、详解、总结
命令行选项以下选项全部在命令行中指定. -advertise - 通告地址用于更改我们通告给集群中其他节点的地址.默认情况下,-bind地址是通告的.但是,在某些情况下,可能存在无法绑定的可路由地址 ...

随机推荐

在Windows 7 上安装 Mapnik
环境: 1.Windows 7_64位 2.Python 2.7_32位步骤: 1.下载 Mapnik SDK http://mapnik.org/download/ 我下载的是 Windo ...
PLC-Heart
Linux 学习一， useradd
安装好VMware 安装好Linux 在安装Linux时候,建立了一个用户,dragon, 和密码...这个用户不是root用户,没有root权限可以切换dragon 到用户root,这个时候就有r ...
SQL Server ->> CLR编程问题汇总
1) CLR不支持C#类方法重载(Method Overload) 今天打算写个枚举目录的C# CLR存储过程,结果发现原来CLR不支持方法重载. Msg 6572, Level 16, State ...
monkeyrunner之安卓开发环境搭建（二）
在上一篇文章-安卓开发环境搭建中,我们创建并启动了eclipse自带的安卓模拟器,该模拟器不仅启动慢,而且在使用过程中的反应速度也是出奇的差,经常出现卡机现象.为了解决这种现象,因此,我们又寻找到了更 ...
【Leetcode】【Easy】Remove Duplicates from Sorted List
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
Spark天堂之门解密
本课主题什么是 Spark 的天堂之门 Spark 天堂之门到底在那里 Spark 天堂之门源码鉴赏引言 Spark 天堂之门就是SparkContext,这篇文章会从 SparkContext ...
Python3循环语句
Python3 循环语句 Python中的循环语句有for和while. 循环语句控制结构图如下: 一.while循环 ①循环结构 while 判断条件: 执行语句实例: n = int(input ...
Arcgis Javascript中geometryEngine报错’hq‘of undefined的解决方法
这个问题困扰了我一个星期,原因是使用geomagicbuffer时候,有的线可正常使用,有的就直接报错,一直没有解决,后来发现是api自己的bug导致的干脆直接读代码,在geometryEngine ...
LA 3126 出租车
题目链接:https://vjudge.net/problem/UVALive-3126 题意:有m个客人,位于不同的位置,去一些地方,出发的时间给出,要一些出租车去接,但是,每辆出租车要在出发前一分 ...

配置Echarts大全

配置Echarts大全的更多相关文章

随机推荐

热门专题