Echarts图表制作

雨点打透心脏的1/2处 2022-04-02 03:02 324阅读 0赞

### <1>常用到的参数 ###

`1)-i`：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。

`2)-o`：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。

`3)--min`：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。

`4)--lang <language shortcut or file path>`：是否使用其他语言版本，默认是中文。例如：`--lang en` 表示使用英文，`--lang my/langXX.js` 表示构建时使用 `<cwd>/my/langXX.js` 替代`echarts/lib/lang.js` 文件。

`5)--sourcemap`：是否输出 source map，以便于调试。

`6)--format`：输出的格式，可选 `'umb'`（默认）、`'amd'`、`'iife'`、`'cjs'`、`'es'`。

### <2>Echart.js的使用 ###

1)引入Js文件

2）准备一个放图表的容器

3)设置参数，初始化图表

### <3>折线图，柱状图，饼状图的series的设定 ###

1)折线图：line

series:[{
         name:'访问量',
         type:'line',
         data:[500,200,360,100]
       }]

2）柱状图：bar

series:[{
             name:'访问量',
             type:'bar',
             data:[500,200,360,100]
                }]

3)饼状图：

饼图没有X轴和Y轴的坐标，数据绑定上也是采用name和value的形式

series: [{
            name: '销量',
            type: 'pie',
           radius:'60%',
            data: [
                {name:"郑州",value:900},
                {name:"杭州",value:800},
                {name:"南京",value:500}
                 ]
             }]

### <3>柱状图效果：折线图只需要将type: line ###

1）创建一个div盒子来盛放我们即将绘制的柱状图

2）通过echarts.init方法初始化一个echars实例并通过setOption方法生成一个简单的柱状图

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
       <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="first" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
           function(ec){
              // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('first'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例',
                   subtext:'纯属捏造，如有雷同，人品爆发。'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
        }
        </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pzMTM0MjA4NDc3Ng_size_16_color_FFFFFF_t_70][]

### <4>饼状图效果 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
       <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="first" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
           function(ec){
              // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('first'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例',
                   subtext:'纯属捏造，如有雷同，人品爆发。'
                },
                tooltip: { 
                       trigger:"item",
                       formatter:"{b}产值<br>{c}"
                    },
                
                series: [{
                    name: '销量',
                    type: 'pie',
                    radius:'60%',
                    data: [
                          {name:"郑州",value:900},
                          {name:"杭州",value:800},
                          {name:"南京",value:500}
                      ]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
        }
        </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pzMTM0MjA4NDc3Ng_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pzMTM0MjA4NDc3Ng_size_16_color_FFFFFF_t_70]: /images/20220402/e7fab408e58e48d68ab6da054b2be1ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pzMTM0MjA4NDc3Ng_size_16_color_FFFFFF_t_70 1]: /images/20220402/9d1e329e02404ac897b0bbf3f00a506e.png