vue插件实践整理

[phoebeCodeSpace]

vue-echart

安装

npm install echarts -S

chart.vue

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

//js
import echarts from 'echarts'
export default{
     data (){
         return (
               chart:null
         )
      },
      mounted() {
        this.chart = echarts.init(document.getElementById('myChart'))   // 初始化
        this.drawLine();
      },
      methods(){
        drawLine(){
        const self = this;
        // 绘制图表
        this.chart.setOption({
            grid: {              // 位置
              left: '3%',
              right: '3%'
            },
            title: {               // 标题
               show:false,
               text: '销量'
            },
            tooltip: {
               trigger: 'axis'
            },     
            toolbox: {        // 工具栏
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {         // 图例
                x:"center",
                y:"bottom",
                data:[{
                  name: '销量',
                  icon:'circle'
                }]
            },
            xAxis: {  
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                type: 'category',
                nameGap:10,  //名称与X轴的距离
                boundaryGap : false,//坐标的刻度是否在中间
                axisLine:{//坐标轴线条相关设置(颜色等)
                    lineStyle:{
                        color:'#ccc'
                    }
                },
                axisLabel:{ //坐标轴刻度标签
                    margin:7, //刻度标签与轴线之间的距离
                    textStyle:{
                        color:"#999",  //坐标轴刻度文字的颜色
                        fontSize:'12px' //坐标轴刻度文字的大小
                    }
                },
            },
            color:['#2d8cf0'],
            yAxis: {
                type: 'value',
                nameGap:10,  //名称与Y轴的距离
                name:self.statisticList[self.seletChart].unit,    //坐标轴名称
                nameTextStyle:{     //名称的样式
                    color:'#999',
                    fontSize:'12px'
                },
                axisTick:{ //坐标轴刻度相关设置
                    length:'0' //设置成0了
                },
                axisLine:{//坐标轴线条相关设置(颜色等)
                    lineStyle:{
                        color:'#ccc'
                    }
                },
                axisLabel:{//坐标轴标签相关设置,距离颜色等
                    margin:7,
                    textStyle:{
                        color:"#999",  //坐标轴刻度文字的颜色
                        fontSize:'12px' //坐标轴刻度文字的大小
                    },
                }
            },
            series: [ {
                name:'销量',
                type:'line',
                data:[5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

根据窗口宽度变化实现自适应

const self = this;
window.addEventListener("resize", function () {
        self .chart.resize();
 });

参考：

• 在vue项目中使用echarts
• echarts 取消图例上的点击事件和图表上鼠标滑过点击事件
• api