vue脚手架中简单使用echarts 折线图为例

1 安装

npm install echarts -S

2 main.js中引入echarts

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

3 组件中

import echarts from 'echarts';

放置一个div，且div必须设置宽高

其余一些配置写在注释里面

<template>
  <div class="echarts1">
  <div
        id="main1"
        style="width:800px;height:600px;"
        ref="Echart1"
     ></div>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'echarts1',
  data () {
    return {
      
    }
  },
  mounted(){
       this.initChart2();
  },
  methods: {
    initChart2() {
    var  option = {
        backgroundColor:"",//全局背景色
        color:[  //数值背景色颜色列表，当系列数量个数比颜色列表长度大时将循环选取
        "#ff7f50",
        "#87cefa",
        "#da70d6",
        "#32cd32",
        "#6495ed",
        "#ff69b4",
        "#ba55d3",
        "#cd5c5c",
        "#ffa500",
        "#40e0d0",
        "#1e90ff",
        "#ff6347",
        "#7b68ee",
        "#00fa9a",
        "#ffd700",
        "#6699FF",
        "#ff6666",
        "#3cb371",
        "#b8860b",
        "#30e0e0"
        ],
        animation:true, //图表初始化动画是否展示
        title: {  //图表标题
            show:true, //控制图表题目是否显示
            text: '堆叠区域图', //图表题目
            backgroundColor:"#ccc", //图表题目颜色
            textAlign:"left",//图表题目位置
            link:"www.baidu.com",//标题设置超文本链接
            target:"blank",//打开超链接的方式
            subtext:"我是echarts",//设置副标题'\n'指定换行
            sublink:"www.baidu.com",//副标题超文本链接
            subtarget:"",//副标题打开方式
            x:"left",//标题水平位置默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y:"top",//标题垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            textAlign:"",//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            borderColor:"#000000",//标题边框
            borderWidth:"2",//边框宽
            padding:"",//默认各方向内边距为5，接受数组分别设定上右下左边距，同css
            //itemGap:"",//主副标题纵向间隔，单位px，默认为10
            textStyle:{ //标题文本样式
                "fontSize": 18,
                "fontWeight": "bolder",
                "color": "#333",
                "fontFamily":""
            },
            subtextStyle:{ //副标题文本样式

            }
        },
        tooltip : { //鼠标悬浮交互时的信息提示
            //show:false,
            //showContent:false,
            trigger: 'axis',//触发类型
            enterable:true,
            backgroundColor:"rgba(0,0,0,0.7)",//提示背景颜色
            borderColor:"#ccc", //提示边框色
            borderRadius:4, //提示圆角
            borderWidth:2, //提示边框宽度
            padding:10, //提示padding
            axisPointer: { //坐标轴指示器，默认type为line
                type: 'line',
                label: {
                    backgroundColor: '#6a7985'
                }
            },
            textStyle:{
                "color": "#ccc" //提示文本字体
            },
        },
        legend: { //图例
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'], //图例名称
            x:"center", //图例水平位置
            y:"top", //图例垂直位置
            backgroundColor:"#ccc",//图例背景色
            itemHeight:20,//图例图形高度
            textStyle:{

            },
            //formatter:"hello world" //文本格式器
        },
        toolbox: {  //工具箱
            show:true,
            //orient:"horizontal",
            //x:"",//显示位置
            //y:"",//显示位置
            backgroundColor:"#ccc", //工具箱背景色
            borderColor:"",
            borderWidth:"",
            padding:"", //内部padding
            itemGap:"", //各个item之间的间隔
            itemSize:"30", //工具箱大小
            showTitle:false, //是否显示工具箱文字提示，默认启用
            textStyle:{}, //工具箱提示文字样式
            feature: {
                mark:{
                    show:true,
                    title:{
                        mark:"辅助线开关"
                    }
                },
                // dataZoom:{
                //     show:true,
                // },
                saveAsImage: {} //保存为图片
            }
        },
        grid: {  //直角坐标系内绘图网格
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            //width:"50%", //图表占整体的多少
            //height:"",

        },
        xAxis : [ //坐标轴类型，横轴默认为类目型'category'
            {
                type : 'category',
                //show:false, //x轴是否显示
                axisLine:{
                    //onZero:false, //定位到垂直方向的0值坐标上
                    //show:false,
                    lineStyle:{
                        color:"#ccc",
                        type:"dotted"
                    }
                },
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                 showSymbol: true,
                 symbol: 'circle',     //折点设定为实心点
                 symbolSize: 10,   //设定实心点的大小
                areaStyle: {},
                data:[120, 132, 101, 134, 90, 230, 210],
                tooltip:{ //提示框样式
                    show:true,
                },
                itemStyle:{
                    normal:{
                       // color:"#ccc" //区域显示颜色
                    },
                    lineStyle:{ //线条样式
                        color:"#ccc",
                        type:"dashed",
                        width:10, //线宽
                    },
                    areaStyle:{
                        color:"#ccc",
                    },
                    label:{
                        show:true,
                        position:"top"
                    }
                },
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    //增加一条折线数据
      option.legend.data.push('win');
      option.series.push({
                name: 'win',                            // 系列名称
                type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        });
       myChart.setOption(option);
    },
},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main1{
    margin:0 auto;
}
</style>