phpstudy集成环境

 首页 > Echarts无法加载主题，是否是文件引入方式不对？

Echarts无法加载主题，是否是文件引入方式不对？

也许是文件引入不对，先贴一下我的目录结构T T

其中macarons.js里是一个名为e_macarons的函数，和官方主题代码一致。
我的代码如下：
原本可以显示默认主题的效果，增加3处代码后
【path里'macarons' : './js_t/macarons'】【require里 'macarons'】和【ec.init(document.getElementById('main'),e_macarons)里的e_macarons】三处语句后，页面什么也不显示了。
折腾了好几天，还是搞不出来，参考了网上的demo，还是云里雾里。
我想问一下theme模块是包含在echarts.js文件里的吗？是我下载的echart.js文件不全吗？我新建一个主题macarons.js是否可以？我这样引用哪里不对呢？求助各位大神，谢谢！

<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　<title>ECharts-基本线性图</title>
    <meta charset="UTF-8" />
　　<script src="js_t/esl.js" charset="utf-8" type="text/javascript"></script>
　　
　　</head>
　　<body>
　　

<div id="main" style="height: 400px; width: 500px; float: left; border: 1px solid #ccc;
　　padding: 10px;">
　　</div>


　　
　　

<script type="text/javascript" language="javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
             'echarts' : './js_t/echarts',
             'macarons' : './js_t/macarons'
            
             
        }
    });
　　// Step:4 require echarts and use it in the callback.
　　// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
　　require(
　　[
　　'echarts',
    'macarons'
　　'echarts/chart/bar', //按需加载图表关于bar图的部分
　　'echarts/chart/line' //按需加载图表关于线性图的部分
　　],
　　DrawCharts
　　);

　　///将画多个图表的进行函数封装
　　function DrawCharts(ec) {
　　DrawColumnEChart(ec);
　　DrawLineEChart(ec);
　　}

　　//创建ECharts柱状图图表
　　function DrawColumnEChart(ec,theme) {
　　//--- 柱状图 ---
　　var myChart = ec.init(document.getElementById('main'),e_macarons);
　　//图表显示提示信息
　　myChart.showLoading({
　　text: "图表数据正在努力加载..."
　　});
　　myChart.hideLoading();
　　myChart.setOption({
　　title: {
　　text: "柱状图"
　　},
　　tooltip: {
　　trigger: 'axis'
　　},
　　legend: {
　　data: ['stepday.com', 'tuiwosa.com']
　　},
　　toolbox: {
　　show: false
　　},
　　calculable: true,
　　xAxis: [
　　{
　　type: 'category',
　　data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
　　}
　　],
　　yAxis: [
　　{
　　type: 'value',
　　splitArea: { show: true }
　　}
　　],
　　series: [
　　{
　　name: 'stepday.com',
　　type: 'bar', //序列展现类型为柱状图
　　data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
　　},
　　{
　　name: 'tuiwosa.com',
　　type: 'bar',
　　data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
　　}
　　]
　　});

　　var ecConfig = require('echarts/config');
　　//ECharts图表的click事件监听
　　myChart.on("click", function () {
　　alert("你点击我了!");
　　});
　　}

　　

　　
　　</script>


　　</body>
　　</html>
【热门文章】
【热门文章】