浅谈echarts在vue里的实际应用以及v-html绑定

就如我在 vue与原生app交互之vue工程主动获取请求url里的参数 里说的那样，h5图形化界面是比原生好看和流畅，所以在自己app中也是提议把用户数据展示模块，独立出来用vue构造出来---------于是乎，就用到了Echarts。
大致的效果：

一、echarts的引入
Echarts既可以按需引入，又可以全部引入，在这为了快捷我是全部导入的，以后需求敲定后再作处理。

npm install echarts --save

同样，你也可以把整个echarts.js load下来直接引入。在这献上echarts相关文档

//main.js 中全部导入
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts

vue中的echarts，官方给的demo案例比较少，但是不用慌，可以根据相关demo修修改改就成了自己想要的了。

二、图形呈现

1. div

<template>
   <div class="month-data-container">
        <div ref="echartsContainer" class="echartsContainer"></div>
        <div ref="echartsContainerTwo" class="echartsContainer"></div>
  </div>
</template>

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上;就是说可以通过

this.$refs.echartsContainer

去找到该元素。

2. css

.echartsContainer {
        width: 100%;
        height: 300px;
    }

3. script — methods（在这展示了两个图）

<script>
 export default {
    data() {
        return {
        }
    },
    methods: {
        //第一个图
        draw_pic_one(arg) {
            let dayDom = this.$refs.echartsContainer
            let myChart = this.$echarts.init(dayDom)       //初始化图表
            myChart.setOption(arg)
        },
        
        //又一个图
        draw_pic_two(arg) {
            let dayDom = this.$refs.echartsContainerTwo
            let myChart = this.$echarts.init(dayDom)
            myChart.setOption(arg)
        },
        
        user_draw() {

             let option2 = {
                color: ['#ecac99'],

                tooltip : {                        //是否显示提示框组件，包括提示框浮层和 axisPointer。
                    trigger: 'axis',            //axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                title: {                //图形title
                left: 'center',
                text: '',
            },
            xAxis: {                                 //直角坐标系 grid 中的 x 轴
                type: 'category',                 //category 适用于离散的类目数据
                data: ['2018/11/11','2018/11/12','2018/11/13','2018/11/14','2018/11/15','2018/11/16','2018/11/17','2018/11/18','2018/11/19','2018/11/20',
                '2018/11/21','2018/11/22','2018/11/23','2018/11/24','2018/11/25','2018/11/26','2018/11/27','2018/11/28','2018/11/29']
            },
             grid:{// 屏幕位置
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true ,        //是否包含坐标轴的刻度标签 true为显示
                    borderWidth:1               //网格的边框线宽。
                },

            yAxis: [
                    {
                        type: 'value',
                        name: '睡眠时长',
                        nameLocation:'center',            //坐标轴名称显示位置。
                        nameGap: 30,//与轴线间距
                    },
                ],
            dataZoom: [{                           //区域缩放，从而能自由关注细节的数据信息
                type: 'inside',
                start: 0,
                end: 100
            }, {
                start: 0,
                end: 100,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [                              //每个系列通过 type 决定自己的图表类型
                {
                    name:'',
                    type:'line',
                    smooth:false,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        color: 'rgb(244, 206, 174)'
                    },
                    areaStyle: {
                        color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(244, 206, 174)'
                        }, {
                            offset: 1,
                            color: 'rgb(244, 206, 174)'
                        }])
                    },
                    data: [100,120,112,113,78,79,89,80,98,86,65,87,90,99,88,77,123,112,113]
                }
            ]
            }
            //给上面两个图设置参数
            this.draw_pic_one(option2)
            this.draw_pic_two(option2)
        }
    },
    //生命周期方法
    mounted() {
        // 初始化执行
        this.user_draw()
    }
}
</script>

这一块是最重要的一部分，也就是说，你可以在script中引入echarts的参数从而构建不同的图表。在代码里编辑了相关参数的意思，详细的文档大家可以参考echarts参数文档。

tip:在此也同时碰到一些其他的问题，简单列举下，碰到的可以参考
1）vue中定义的变量都需要this.变量名寻找，不然总是报not defined；
2）v-html绑定
eg:我在day中自己自定义了一个条块界面，在div动态添加div时，展示出来的是
<div class=‘line’>...</div>
就是说，展示出来的是文字，而不是我想要的图形。所以在这里用到v-html绑定

<template>
   <div class="day-data-container">
     <top></top>
            <!-- 睡眠条    v-html绑定-->
            <div id="one" ref="myBox" v-html="divList" >
        </div>
</template>

 data() {
        return {
          divList:''                           //定义v-html对应的的变量
        }
    },

//在methods中添加动态方法
 addOption(){
         var  sum =0;
          this.jsonStr.forEach((item,index,arr) =>{
             sum += parseInt(item.value);
          });

          this.jsonStr.forEach((item,index,arr) =>{
             if(item.id%2==0){
                this.divList += "<div class='floatTwo' style='width:"+(item.value*( 100/sum))+"%'></div>";  
                }
             if(item.id%2>0){
              this.divList += "<div class='float' style='width:"+(item.value*( 100/sum))+"%'></div>；
                }
          });

我这是我的需求，如果你只是看绑定样式，你大可以：

 data() {
        return {
          divList:'<ul>
                          <li>1</li>
                          <li>2</li>
                          <li>3</li>
                          <li>4</li>
                          <li>5</li>
                          <li>6</li>
                          </ul>'                           //定义v-html对应的的变量
        }
    },

运行代码，你就可以在界面里看到
1
2
3
4
5
6
，好了，最后献上我本次的vue工程
GitHub传送门----记得你们的小星星啊