博客

echarts3

  • Post category:other

ECharts是一个基于JavaScript的开源可视化库，可以用于创建各种交互式图表和地图。ECharts3是ECharts的第三个版本，提供了更多的图表类型和功能。以下是使用ECharts3的完整攻略：

步骤1：下载ECharts3

可以从ECharts官网（https://echarts.apache.org/zh/index.html）下载ECharts3。下载，将echarts.min.js文件复制到项目文件夹中。

步骤2：创建HTML文件

在项目文件夹中创建一个HTML文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html>
>
    <meta charset="utf-8">
    <title>ECharts3 Demo</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px;height:400px;"></div>
    <script>
        // 在这里编写JavaScript代码
    </script>
</body>
</html>

上面的代码创建了一个包含一个div元素的HTML文件，用于显示图表。在div元中，id属性为“chart”，宽度为600像素，高度为400像素。在head元素中引入了ECharts3的JavaScript文件。

步骤3：创建图表

在JavaScript代码块中，可以使用ECharts3创建各种图表。以下是一个创建柱状图的示例代码：

var chart = echarts.init(document.getElementById('chart'));

var option = {
    title: {
        text: '柱状图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20 36, 10, 10, 20]
    }]
};

chart.setOption(option);

上面的代码创建了一个柱状图，用于显示销售数据。在option对象中，设置了图表的标题、提示框、图例、x轴、y轴和数据系列。最后，chart.setOption()方法将option对象应用于图表。

以下是一个创建饼图的示例代码：

var chart = echarts.init(document.getElementById('chart'));

var option = {
    title : {
        text: '饼图示例',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

chart.setOption(option);

上面的代码创建了一个饼图，用于显示访问数据。在option对象中，设置了图表的标题、提示框、图例、数据系列和样式。最后，使用chart.setOption()方法将option对象应用于图表。

总结：

  • ECharts3是一个基于JavaScript的开源可视化库，可以用于各种交互式图表和地图。
  • 可以从ECharts官网下载ECharts3将echarts.min.js文件复制到项目文件夹中。
  • 可以使用HTML文件和JavaScript代码创建图表。在JavaScript代码中，可以使用ECharts3创建各种图表类型，如柱状图、饼图等。

以下是一个完整的示例代码，用于创建一个包含柱状图和饼图的页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts3 Demo</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="chart1" style="width: 600px;height:400px;"></div>
    <div id="chart2" style="width: 600px;height:400px;"></div>
    <script>
        var chart1 = echarts.init(document.getElementById('chart1'));

        var option1 = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        chart1.setOption(option1);

        var chart2 = echarts.init(document.getElementById('chart2'));

        var option2 = {
            title : {
                text: '饼图示例',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        chart2.setOption(option2);
    </script>
</body>
</html>

上面的代码创建了一个包含柱状图和饼图的页面。在JavaScript代码中，分别创建了两个图表对象chart1和chart2，并分别设置了柱状图和饼图的option对象。最后，使用chart1.setOption()和chart2.setOption()方法将option对象应用于图表。

Tags: