初识echharts

一、引入

1、无webpack/parcel
bootcdn引入,之后可以使用全局变量windowe.charts

index.html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script>
    console.log(echarts)
</script>
打印出对象即可查看api

2、有webpack/parcel

yarn add echarts
yarn add --dev tyeps/echart //类型提示更加智能
import * as echarts from 'echarts'
或者 var echarts = require('echarts')
然后使用echarts即可

二、绘制一个简单的图

1、在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。

<div id="main" style="width: 600px;height:400px;"></div>

2、然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成图

// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));

let option = 具体内容抄了改

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

三、如何修改细节

1、换肤
第二个参数 dark黑暗模式 light亮 default 默认

let myChart = echarts.init(document.getElementById('main'),'default');

2、其他
比如
series下的line Style 是折线图线的style 可以有颜色啥的
itemStyle 是折线图点的style 可以borderWidth等

有什么办法能够稳定的知道我要改的东西怎么改的吗
通过
术语速查手册
找到你想改动的地方进行改动

四、echarts如何更新数据

目前只是静态数据，如何更新数据呢（表会动）再次setOption即可，echarts会自动找出差异并更新图表。
如：新加一个数据

<button id="loadMore">加载更多</button>


const loadMore = document.getElementById('loadMore')
loadMore.addEventListener('click',()=>{
    const key = 'fuck'
    const value = 8
    myChart.setOption({
        xAxis:{
            data:[...xData,key]
        },
        series:[{
            data:[...values,value]
        }]
    })
})

直接再setOtion即可 只动你需要改的，需要改哪的话，写上原来的 再加上新的即可

一直加数据

import * as echarts from 'echarts'
console.log(echarts)
const loadMore = document.getElementById('loadMore')


// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
let n = 0
let m = 10
function createKey(){
    n+=1
    return `2020-1-${n}`
}
function createValue(){
    m+=1
    return m
}
const xData  =  [createKey(),createKey(),createKey(),createKey(),createKey(),createKey()]
const values = [createValue(), createValue(), createValue(), createValue(), createValue(), createValue()]
//指定图表的配置项和数据
let option = {
    title: {
        text: '777'
    },
    tooltip: {},
    legend: {
        data: ['生产量']
    },
    xAxis: {
        data:xData
    },
    yAxis: {},
    series: [
        {
            name: '生产量',
            type: 'bar',
            data: values
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

loadMore.addEventListener('click',()=>{
    const key = createKey()
    const value = createValue()
    xData = [...xData,key]
    values = [...values,value]
    myChart.setOption({
        xAxis:{
            data: xData
        },
        series:[{
            data:values
        }]
    })
})

添加新的其实就是把你要改的数据再setOption
如果我的数据是从数据库中来的呢，其实是一样的 都是得到数据之后setOption

五 添加loading动画

开始的时候showLoading
结束的时候hideLoading
加延迟，模拟从数据库中拿到

此时要防止用户一直点加载更多
不然动画结束后直接点几下加几下
自己写一个变量控制一下即可

let isLoading = false

loadMore.addEventListener('click',()=>{
    if (isLoading===true){return}
    myChart.showLoading()
    isLoading = true
    setTimeout(()=>{
        const key = createKey()
        const value = createValue()
        xData = [...xData,key]
        values = [...values,value]
        myChart.setOption({
            xAxis:{
                data: xData
            },
            series:[{
                data:values
            }]
        })
        myChart.hideLoading()
        isLoading = false
    },3000)
})

六 echarts的点击事件

用户可以和图交互，比如点击这个点就可以查看到当前月份的流水

clipboard.png

//点击之后会得到本事件相关的所有信息
myChart.on('click',(e)=>{
    console.log(e)
    console.log(data)//纵轴上的数据
    console.log(dataIndex) //横轴第几个
    name就是日期，我们可以根据日期来跳转到相应的页面
    window.open(`http://www.baidu.com/time=${name}`)
})

把e打出来，可以查看需要用到的信息。

clipboard.png

七、移动端适配

1)meta:viewport 抄淘宝手机版
不做这一步用户有可能缩放屏幕
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
（2）用JS获取屏幕宽度设置再div上
（3）设定宽高比
太宽无法显示到手机上
<div id="main" style="width: 600px;height:400px;"></div>
解决办法：不写定宽度 用JS获取
const main = document.getElementById('main')
const width = document.documentElement.clientWidth
main.style.width = `${width}px`
main.style.width = `${width}*1.2px`

（4）如果我手机与pc部分 不一样 
echarts 提供的功能
baseOption+media 

把options分成两部分
1.baseOption,
把东西都写在里面，这是手机与pc共享的部分
2、加媒体查询，最大宽度500
let option = {
    baseOption{
        title: {
            text: '777'
        },
        tooltip: {},
        legend: {
            data: ['生产量']
        },
        xAxis: {
            data:xData,
            axisTick:length=20
        },
        yAxis: {},
        series: [
            {
                name: '生产量',
                type: 'bar',
                data: values
            }
        ]
    },
   media:[
       {
           query:{
               maxWidth:500
           },
           option:{
               title: {
                   text: '888'
               },
           }
       }
   ]

};

};

8、在vue中如何使用echarts

yarn add vue
index.html/main.js

<div id="root"></div>
<script src="vue-main.js"></script>

import Vue from 'vue'
import vueApp from "./vue-app";

new Vue({
    render:h=>h(vueApp)  //渲染
}).$mount(document.getElementById('root')) //挂载

echarts.vue
我是一个组件option一定般是别人给我的外部数据，写在外面app中的data
修改图表，直接点击按钮触发时间修改option即可
但是我们的echarts组件必须要监听option的变化
加watch,再set一遍

loading
还是echarts接受一个外部数据 loading
app默认值false
然后在点击修改数据的时候
首先把他变为true
当为true再点击就直接return
当loading完事了
改为false
然后再echarts中wathc
如果loading === true 就showLoading

vue-echarts组件
新的操作div加 ref   = container
通过this.$refs.container，可以拿到这个div

<template>
<div ref="container">
111
</div>
</template>

<script lang="ts">
//初始化echarts
import * as echarts from 'echarts'
export default {
  name: 'vue-echarts',
  props:['option','loading'],
  mounted() {
    console.log(this.$refs.container);
    //1.设置宽高
    const width = document.documentElement.clientWidth
    this.$refs.container.style.width = `${width-20}px`
    this.$refs.container.style.height = `${width*1.2}px`
    //init 挂在this上
    this.chart =echarts.init(this.$refs.container,'dark')
    this.chart.setOption(this.option)
  },
  watch:{
    option(){
      this.chart.setOption(this.option)
    },
    loading(){
      if(this.loading === true){
        this.chart.showLoading()
      }else{
        this.chart.hideLoading()
      }

    }
  }
};
</script>

app.vue

<template>
<div>
  <h1>看我如何在vue中使用echarts</h1>
  <vue-echarts :option = 'option' :loading = 'loading'/>
  <button @click="loadMore">修改数据</button>
</div>
</template>

<script lang="ts">
import VueEcharts from './vue-echarts'
export default {
  name: 'vue-app',
  components:{VueEcharts},
  data(){
    return{
      loading :false,
      option:{
        title: {
          text: '777'
        },
        tooltip: {},
        legend: {
          data: ['生产量']
        },
        xAxis: {
          data:[1,2,3,4,5,6],
          axisTick:length=20
        },
        yAxis: {},
        series: [
          {
            name: '生产量',
            type: 'bar',
            data: [1,2,3,4,5,6]
          }
        ]
      }
    }
  },
  methods:{
    loadMore(){
      this.loading = true
      setTimeout(()=>{
        this.loading = false
        this.option = {
          xAxis:{
            data: [1,2,3,4,5,6,7]
          },
          series:[{
            data:[1,2,3,4,5,6,7]
          }]
        }
      },3000)

    }
  },


};
</script>

什么是数据可视化：echarts做页面就是 但是是最初级的只是做一些图标
看文档即可解决一切，

d3.js在数据可视化方面可以深入研究。