如何导入使用echarts和切换主题

  网站如何使用echarts,要使用echarts绘制图形需要哪些js文件。下载的echarts示例里面有很多文件,实际使用到的只有3个文件(esl.js,echarts.js,echarts-map.js),如果不需要地图,那么只需要前面esl.js,echarts.js,其中esl.js是必须的。

  下面以echarts-2.0.4为例,将下载的echarts-2.0.4压缩包解压到任意一个路径下,打开echarts-2.0.4\doc\example\www\js路径,将里面的3个js文件拷贝到你的网站目录下,如网站根目录/js文件夹下。如果你需要切换echarts的theme主题,需要将echarts-2.0.4\doc\example\theme下的主题js文件一起拷贝到网站根目录/js文件夹下。

如何使用导入echarts和切换主题

  如何使用导入echarts和切换主题源代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何使用导入echarts和切换主题</title>
<!--引入esl.js模块加载器-->
<script src="js/esl.js"></script>
</head>
<body>
<!--echarts容器-->
<div id="echarts" style="width:400px;height:300px"></div>
<script type="text/javascript">
    //为模块加载器配置echarts的路径,注意相对于当前页面所在路径(如果是重写过路径的,注意是相对于重写后的路径,就是浏览器地址栏显示的url)
    var fileLocation = 'js/echarts';
    require.config({
        paths: {
            echarts: fileLocation,
            //定义所需图表路径,其实可以不用定义,但是调用下面的require加载图表模块时会请求对应js文件,由于不存在会404错误
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/scatter': fileLocation,
            'echarts/chart/k': fileLocation,
            'echarts/chart/pie': fileLocation,
            'echarts/chart/radar': fileLocation,
            'echarts/chart/map': fileLocation,
            'echarts/chart/chord': fileLocation,
            'echarts/chart/force': fileLocation,
            'echarts/chart/gauge': fileLocation,
            'echarts/chart/funnel': fileLocation,
            //图表路径结束
             'dark': 'js/dark'//定义主题路径
        }
    });
    function requireCallback(echarts) {//加载完毕后的回调函数,生成echarts
        myChart = echarts.init(document.getElementById('echarts'));
        
        //加载dark主题theme文件并调用setTheme进行替换
        require(['dark'], function (theme) { curTheme = theme; myChart.setTheme(theme); });
        myChart.setOption({//设置数据,更多配置项目看这个:http://echarts.baidu.com/doc/doc.html
            title: { text: '如何使用导入echarts和切换主题' },
            xAxis: [{ type: 'category', splitLine: { show: false }, data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'] }],
            yAxis: [{ type: 'value' }],
            series: [
                {
                    name: '辅助', type: 'bar', stack: '总量',
                    itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } },
                    data: [0, 1700, 1400, 1200, 300, 0]
                },
                {
                    name: '生活费', type: 'bar', stack: '总量', itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [2900, 1200, 300, 200, 900, 300]
                }
            ]
        });
    }
    //动态加载echarts然后在回调函数中开始使用,注意和require.config配置的path一致,根据需求加载你要的图表
    require(['echarts', 'echarts/chart/bar'], requireCallback);
</script>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:如何导入使用echarts和切换主题

评论(0)Web开发网
阅读(1229)喜欢(0)JavaScript/Ajax开发技巧