https://echarts.apache.org/
npm install echarts

自适应宽度

注意点: 记得在组件销毁阶段去除事件监听window.onresize = null

  1.     //渲染柱状图
  2.     const renderBarView = (obj) =>{
  3.       var myChart = Echarts.init(barRef.current);
  4.       var option = {...};
  6.       option && myChart.setOption(option);
  8.       //自适应
  9.       window.onresize = () =>{
  10.         myChart.resize()
  11.       }
  12.     }

切换数据 setOptions({})

点击导航栏切换title,通过title不同设置图表信息

  1. export default {
  2.   name: 'Sale',
  3.   data() {
  4.     return {
  5.       activeName: 'sale',//导航栏title
  6.       listState:[],//数据
  7.       mycharts: null,
  8.     }
  9.   },
  10.   computed: {
  11.     //导航栏title
  12.     title() {
  13.       return this.activeName == 'sale' ? '销售额' : '访问量'
  14.     }
  15.   },
  16.   watch: {
  17.     title() {
  18.       //title切换时 重置图表信息
  19.       this.mycharts.setOption({
  20.         title: {
  21.           text: this.title
  22.         },
  23.         xAxis: {
  24.           data: this.activeName == 'sale'
  25.             ? this.listState.orderFullYearAxis
  26.             : this.listState.userFullYearAxis
  27.         },
  28.         series: [{
  29.           data: this.activeName == 'sale'
  30.             ? this.listState.orderFullYear
  31.             : this.listState.userFullYear
  32.         }]
  33.       })
  34.     },
  35.   }
  36. }

绑定事件

给图表绑定事件，设置图标副标题

  1.   mounted() {
  2.     const mychart = echarts.init(this.$refs.charts)
  3.     mychart.setOption({})
  4.     // 绑定事件
  5.     mychart.on('mouseover', (params) => {
  6.       // 获取鼠标移上去那条数据
  7.       const { name, value } = params.data
  8.       // 重新设置标题
  9.       mychart.setOption({
  10.         title: {
  11.           text: name,
  12.           subtext: 'value'
  13.         }
  14.       })
  15.     })
  16.   }