Echarts在Vue中使用，跟每个字段的意思

1、安装echarts依赖

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

2、创建图表

在main.js中全局引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在Echarts.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

4、初始化echarts实例

    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        //--------------    标题 title  ----------------
        title: {
            // text: '主标题',
            // textStyle:{                    //---主标题内容样式
            //     color:'#fff'
            // },

            // subtext:'副标题',            //---副标题内容样式
            // subtextStyle:{
            //     color:'#bbb'
            // }
            padding: [0, 0, 0, 0]                //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位

        },

        //----------------   图例 legend  -----------------
        legend: {
            type: 'plain',
            top: '20',                    //----图例相对容器位置,top\bottom\left\right
            selected: {
                '销量': true,            //----图例选择,图形加载出来会显示选择的图例，默认为true
            },
            textStyle: {                    //----图例内容样式
                color: '#30395E',                //---所有图例的字体颜色
            },
            tooltip: {                    //图例提示框，默认不显示
                show: true,
                color: 'red',
            },
            data: [                        //----图例内容
                {
                    name: '',
                    icon: 'circle',            //----图例的外框样式
                    textStyle: {
                        color: '#30395E',        //----单独设置某一个图例的颜色
                    }
                }
            ],
        },

        //--------------   提示框 -----------------
        tooltip: {
            show: true,                    //---是否显示提示框,默认为true
            trigger: 'item',                //---数据项图形触发
            axisPointer: {                //---指示样式
                type: 'shadow',
                axis: 'auto',

            },
            padding: 5,
            textStyle: {                    //---提示框内容样式
                color: "#fff",
            },
        },

        //-------------  grid区域  ----------------
        grid: {
            show: false,                    //---是否显示直角坐标系网格
            top: 20,                        //---相对位置，top\bottom\left\right
            containLabel: false,            //---grid 区域是否包含坐标轴的刻度标签
            tooltip: {                    //---鼠标焦点放在图形上，产生的提示框
                show: true,
                trigger: 'item',            //---触发类型
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: {
                    color: '#30395E',
                },
            }
        },

        //-------------   x轴   -------------------
        xAxis: {
            show: true,                    //---是否显示
            position: 'bottom',            //---x轴位置
            offset: 0,                    //---x轴相对于默认位置的偏移
            type: 'category',            //---轴类型，默认'category'
            // name:'',                //---轴名称
            nameLocation: 'end',            //---轴名称相对位置
            nameTextStyle: {                //---坐标轴名称样式
                color: "#30395E",
                padding: [5, 0, 0, -5],    //---坐标轴名称相对位置
            },
            nameGap: 15,                    //---坐标轴名称与轴线之间的距离
            axisLine: {                    //---坐标轴 轴线
                show: true,                    //---是否显示

                //------------------- 箭头 -------------------------
                // symbol:['none', 'arrow'],    //---是否显示轴线箭头
                //------------------- 线 -------------------------
                lineStyle: {
                    color: '#30395E',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {                    //---坐标轴 刻度
                show: true,                    //---是否显示
                inside: true,                //---是否朝内
                length: 3,                    //---长度
                lineStyle: {
                    //color:'red',            //---默认取轴线的颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {                    //---坐标轴 标签
                show: true,                    //---是否显示
                inside: false,                //---是否朝内
                align: "center",
                verticalAlign: "middle",
                rotate: -50,
                //---旋转角度
                margin: 30,                    //---刻度标签与轴线之间的距离
                //color:'red',                //---默认取轴线的颜色
            },
            splitLine: {                    //---grid 区域中的分隔线
                show: false,                    //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                lineStyle: {
                    //color:'red',
                    //width:1,
                    //type:'solid',
                },
            },
            splitArea: {                    //--网格区域
                show: false,                    //---是否显示，默认false
            },
            data: [],
        },

        //----------------------  y轴  ------------------------
        yAxis: {
            show: true,                    //---是否显示
            position: 'left',            //---y轴位置
            offset: 0,                //---y轴相对于默认位置的偏移
            boundaryGap: [0, "20%"],
            type: 'value',            //---轴类型，默认'category'
            // name:'',                //---轴名称
            nameLocation: 'end',            //---轴名称相对位置value
            nameTextStyle: {                //---坐标轴名称样式
                color: "#30395E",
                padding: [5, 0, 0, 5],    //---坐标轴名称相对位置
            },
            nameGap: 15,                    //---坐标轴名称与轴线之间的距离

            axisLine: {                    //---坐标轴 轴线
                show: true,                    //---是否显示

                //------------------- 箭头 -------------------------
                // symbol:['none', 'arrow'],    //---是否显示轴线箭头

                //------------------- 线 -------------------------
                lineStyle: {
                    color: '#30395E',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {                    //---坐标轴 刻度
                show: true,                    //---是否显示
                inside: true,                //---是否朝内
                length: 1,                    //---长度
                lineStyle: {
                    //color:'red',            //---默认取轴线的颜色
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {                    //---坐标轴 标签
                show: true,                    //---是否显示
                inside: false,                //---是否朝内
                rotate: 0,                    //---旋转角度
                margin: 8,                    //---刻度标签与轴线之间的距离
                //color:'red',                //---默认取轴线的颜色
            },
            splitLine: {                    //---grid 区域中的分隔线
                show: true,                    //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                lineStyle: {
                    color: '#CFD3DC',
                    width: 1,
                    type: 'solid',            //---类型
                },
            },
            splitArea: {                    //--网格区域
                show: false,                    //---是否显示，默认false
            },
        },

        //------------ 内容数据  -----------------
        series: [
            {
                // name: '',                //---系列名称
                type: 'bar',                //---类型
                legendHoverLink: true,        //---是否启用图例 hover 时的联动高亮
                label: {                        //---图形上的文本标签
                    show: false,
                    position: 'insideTop',    //---相对位置
                    rotate: 0,                //---旋转角度
                    color: '#1F4AB1',
                },
                itemStyle: {                    //---图形形状
                    color: '#1F4AB1',
                    barBorderRadius: [0, 0, 0, 0],
                },
                barWidth: '24',                //---柱形宽度
                barCategoryGap: '25%',        //---柱形间距
                legend: {
                    data: ['数值'],
                    top: '30'
                },
                data: []
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

注意：如果echarts不起作用，可以适当降低echarts版本