vue中使用eachrts

官网：https://www.echartsjs.com/index.html

 var echarts=require('echarts');
         var myChart = echarts.init(document.getElementById("dataView"),null)
         myChart.setOption({
              title: {
                text: '今日流量趋势'
            },
            tooltip: {
                formatter:function(parmas){
                    return parmas.marker+parmas.name+'<br/>'+parmas.value
                }  
// hover的时候显示的数据（marker - 颜色 ，name - x轴数据，value - y轴数据）
            },
            legend: {
            },
            xAxis: {
                // axisLabel:{
                //     formatter:function(val){
                //         return{}
                //     }
                // },
                data: ["06:00","07:30","09:00","11:30","13:00","14:30","16:00","17:30","19:00","20:30","22:00","23:30"]  
// x轴数据
            },
            yAxis: {},
            series: [{
                type: 'bar',  //图形样式
                color:'#7b9ce1',  // 图形颜色
                renderItem:function(parmas,api){

                },
                data: [20000, 40000, 60000, 80000]  
            }]
         })

1. series: [{
   type: ' ', //图形样式
   color:'#7b9ce1', // 图形颜色
   }]

image.png image.png

2.拖动

拖动.gif

 dataZoom:[{
                type:'inside',
                start:0,
                end:31,
            }],

3.样式

smooth.gif

4.trigger
4-1:

trigger.gif

4-2:lable位置

trigger1.gif