第一步、安装

cnpm install echarts --save  

第二步、引入

2.引入到项目中

    2.1 全局引入 (在main.js中引入)

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

      直接绑定在vue实例上,在任何组件中,直接 this.$echarts 即可使用


    2.2局部引入(在所需页面引入)

    import echarts from 'echarts'

第三步、初始化echarts

        3.1  你需要echarts的页面中得创建一个dom元素

 <div id="myCharts" ref="myCharts"></div>

        3.2 在mounted中初始化echarts ( 以下例子为折线图

mounted(){
        //使用init初始化
   1.  const  myCharts = this.$echarts.init(this.$refs.myCharts);
   2.   let options = {
          title: { 
             text: '过去某周气温变化',   //图表顶部的标题 
          },
          tooltip: {   //鼠标悬浮框的提示文字
              trigger: 'axis'
            },
          legend: {
            data:['最高气温','最低气温']
          },
          xAxis : [{  //x轴坐标数据
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
            }],
           yAxis : [{   //y轴坐标数据
              type : 'value',
              axisLabel : {
                formatter: '{value} °C'
              }
            }],
          series: [  //驱动图表生成的数据内容数组,几条折现,数组中就会有几个对应对象,来表示对应的折线
            {
              name:"最高气温",
              type: "line",  //pie->饼状图  line->折线图  bar->柱状图
              data:[11, 11, 15, 13, 12, 13, 10], 
              },
            {
              name:"最低气温",
              type: "line",  //pie->饼状图  line->折线图  bar->柱状图
              data:[1, -2, 2, 5, 3, 2, 0],
              }
          ]}

    3.  myCharts.setOption(options);
}

ok ,这样就成功的实现了 echarts,更多方法还请参考官方网站

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐