yarn echarts没法安装 echart安装教程

echarts的学习

• 一.echarts的安装
• 二.创建图表
• 三.线性图表实例
• 四.柱状图表实例

一.echarts的安装

三种方式：（1）下载echarts.min.js，通过script引用
（2）通过CDN的方式引用
（3）npm install echarts -s

二.创建图表

步骤：
（1）引入echarts.min.js
（2）准备一个具备宽高的dom元素
（3）设置配置信息
具体步骤：
a.获取dom元素
b.初始化echarts实例
c.设置配置信息
d.显示图表

// 基于准备好的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.min.js

（二）声明一个具备宽高的dom元素

<!-- 图表一 申领人数 START -->
        <div class="echarts-box echarts-box1 fl"> </div>
        <!-- 图表一 申领人数 END -->

（三）设置配置信息

// 获取dom元素
var myEcharts_box1 = document.getElementsByClassName('echarts-box1')[0];
// 初始化echarts实例
var myEcharts1 = echarts.init(myEcharts_box1);
// 设置配置信息
var option1 = {
    // 标题
    title:{
        text:"申领人数",
        //标题文字样式
        textStyle:{
            color:"#fff",
        }
    },
    // 提示信息
    tooltip:{},
    // 图例组件颜色
    color:['#29f2ff','#fff'],
    // 图例组件的设置
    legend:{
        data:[
                {
                    // 名称
                    name:'累计申领人数',
                    // 形状
                    icon:'rect',
                    // 文字颜色
                    textStyle:{
                        color:"#79bafc"
                    },   
                },
                {
                    name:'当日申领人数',
                    icon:'rect',
                    textStyle:{
                        color:"#fff"
                    }
                }
            ],
            // 图例组件的大小
            itemWidth:10,
            itemHeight:10
    },
    // X轴
    xAxis:{
       // 坐标轴名称
        name:"",
        data:['2.28','2.29','3,1','3.2','3.3','3.4','3.5'],
        // 坐标轴样式
        axisLine:{
            lineStyle:{
                color:"#fff"
            },
        },
        // 坐标轴刻度
        axisTick:{
            show:false
        }
    },
    yAxis:[
        {
            name:"万人",
            // data:['0','100','150','200','250','300'],
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#fff"
                }
            },
            // 分割线
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#ccc',
                    type:'dotted'
                }
            }
        },
        {
            name:"万人",
            type:'value',
            // data:['0','100','150','200','250','300'],
            dataMin:0,
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#fff"
                }
            },
            // 分割线
            splitLine:{
                show:true,
                // 分割线样式
                lineStyle:{
                    color:'#ccc',
                    type:'dashed'
                }
            },
            //刻度最小值
            min:0,
            //刻度最小值
            max:300,
        },
    ],
    // 设置每个系列的图表
    series: [
            {
                //系列名称 
                name: "累计申领人数",
                // 系列图表类型
                type: 'line',
                // 系列中对应的数据
                data: [142, 160, 180, 240, 248, 258,266],
                label:{
                    show:true,
                    position:'top'
                },
                // symbol: 'none',   //去掉折现圆点

            },
            {
                //系列名称 
                name: "当日申领人数",
                // 系列图表类型
                type: 'line',
                // 系列中对应的数据
                data: [80, 60, 82, 56, 76, 52,36],
                label:{
                    show:true,
                    position:'top'
                },
            },
        ]
    }
//显示图表
myEcharts1.setOption(option1);

实际结果：

四.柱状图表实例

var xText_data = ["滨海","和平","河北","河西","河东","南开","红桥","东丽","西青","津南","北辰","武清","宝坻","静海","宁河","蓟州"];
var myEcharts_box2 = document.getElementsByClassName('echarts-box2')[0];
   // 初始化echarts实例
var myEcharts2 = echarts.init(myEcharts_box2);

// 配置信息
var option2 = {
    // 标题
    title:{
        text:"在津区域分配",
        textStyle:{
            color:"#fff"
        }
    },
    //图例组件
    legend:{
        data:[
            {
                name:"在津人员申领人数",
                icon:'rect',
                textStyle:{
                    color:"#79bafc"
                },  
            }
        ],
        //图例宽高
        itemWidth:10,
        itemHeight:10
    },
    xAxis:{
        name:'',
        data:xText_data,
        // 坐标轴样式
        axisLine:{
            lineStyle:{
                color:"#fff"
            },
        },
        // 坐标轴刻度
        axisTick:{
            show:false
        },
        // 坐标轴刻度标签
        axisLabel:{
            interval:0,
            textStyle:{
                color:"#79bafc"
            },
        }
    },
    yAxis:[
        {
           // 坐标轴刻度
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#fff"
                }
            },
            //分割线
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#ccc',
                    type:'dotted'
                }
            },
            min:0,
            max:45,
            // data:[0,15,25,35,45],
        }
    ],
    series:[
        {
            name:"在津人员申领人数",
            type:'bar',
            data:[36,32,24,18,23,23,34,21,10,28,34,8,10,26,26,10],
            itemStyle:{
                normal:{
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ 
                        offset: 0,
                        color: '#66a5fc'
                    }, {
                        offset: 1,
                        color: '#2bf1ff'
                    }]),
                   
                }
            },
            // 柱状图宽度
            barWidth:15,
            // 柱状图的值
            label:{
                // 是否显示
                show:true,
                // 定位
                position:"top",
                // 字体样式
                textStyle:{
                    color:"#2bf1ff"
                }
            },
            // 是否显示条状图的背景
            showBackground:true,
            // 背景样式
            backgroundStyle:{
                color:"rgba(255,255,255,0.2)"
            }
            
        }
    ]
    
}
myEcharts2.setOption(option2)

实际效果