入门级echarts柱形图 及单击事件

第一步：官网下载echarts.js，引入文件

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

第二步：建立一个容器（自己设定高度，宽度），取个id名称

<div id="main" style="width: 600px; height: 400px;"></div>

第三步：初始化echarts实例

<script type="text/javascript">将下面的代码复制粘贴到</script>

代码如下：

 // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            //法一

           // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            //法二
            //绘制图表。
            echarts.init(document.getElementById('main')).setOption({

 

                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]

            });

          //echarts图表的单击事件

           //基于准备好的dom，初始化ECharts实例
            var myChart = echarts.init(document.getElementById('main'));
            //指定图表的配置项和数据
            var option = {
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
            //处理点击事件并且跳转到相应的百度搜索页面
            myChart.on('click', function (params) {
                window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
            });

 

            myChart.on('click', function (params) {
                if (params.componentType === 'markPoint') {
                    //点击到了markPoint上
                    if (params.seriesIndex === 5) {
                        //点击到了index为5的series的markPoint上。
                    }

 

                    else if (params.componentType === 'series') {
                        if (params.seriesType === 'graph') {
                            if (params.dataType === 'edge') {
                                //点击到了graph的edge(边)上
                            } else {
                                //点击到了graph的node(节点)上
                            }
                        }
                    }
                }

            });