Echarts

基础概念

✅ 重要配置项 🫱 配置文档

• Axis坐标轴
• Legend图例
• Tooltip提示

✅ 图表分类

• line、bar：走势
• pie：占比
• radar（展示技能) funnel(浏览、点击、加购、购买) progress(进度) map(地图展示) pictorialBar(象形图片)

步骤

1. init创建实例

• canvas id="charts"></canvas>
• onMounted中getElementById获取挂载目标
• echars.init(targetDom, theme, {options})初始化创建实例 🫱主题编辑器自定义主题

  // 如果需要使用百分比描述宽高，需要使用JS手动获取屏幕宽高再计算
  let myEcharts = echars.init(targetDom, null, {
      width: 400,
      height: 400,
      devicePixelRatio: window.devicePixelRatio // 2则是1个css像素对应2个物理像素，实际大小800x800
  })
  

• 如果init未指定宽高，则是挂载目标的宽高x像素比

2. setOption基本配置

• ✅series

   let options = {
       // series每一项代表一个图
       series: [{
           type: 'pie',
           data: [10, 20, 30, 40]
       }]
   }
   myEcharts.setOption(options)
  

• ✅xAxis和yAxis 在直角坐标系中一定要定义

  let options = {
   series:[{
     type: 'line',
     data: [10, 20, 30, 40, 70]
   },{
     type: 'line',
     data: [15, 10, 20, 50, 20]
   }],
   xAxis:{
     data: [1,2,3,4,5]
   },
   yAxis:{
   }
  }
  myEcharts.setOption(options)
  

• ✅调用setOption进行图表渲染

  const renderChart = (options, notMerge) => myEcharts.setOption(options, notMerge)
  
  // 配置会合并,series替代原来series
  renderCharts({
      series:[{
          type: 'line',
          data: [100, 200, 300, 400, 700]
      }]
  }, false)
  
  // 配置合并，series通过id区分，添加到原来的series
  renderCharts({
      series:[{
          id: 1,
          type: 'line',
          data: [100, 200, 300, 400, 700]
      }]
  }, false)
  
  // 配置不合并
  renderCharts({
      series:[{
          type: 'line',
          data: [100, 200, 300, 400, 700]
      }],
      xAxis: {},
      yAxis: {},
  }, true)
  

legend

基础使用

✅显示图例，给legend传空对象即可，series对象必须有名字

let options = {
 series:[{
   name: 'bird',
   type: 'line',
   data: [10, 20, 30, 40, 70]
 },{
   name: 'cat',
   type: 'line',
   data: [15, 10, 20, 50, 20]
 }],
 legend: {
 },
 xAxis:{
   data: [1,2,3,4,5]
 },
 yAxis:{
 }
}
myEcharts.setOption(options)

配置项

• item：图形相关
• line：线相关
• text：文本相关

  legend: {
      icon：‘image://https//xxxx.jpeg’, //替换图样
      itemStyle: {
          color: black, //图形颜色
      },
      formatter: name => 'Legend ' + name, // 对文字进行操作
      selector: ['all', 'inverse']  // 全选和反选
  },

tooltip

基础使用

✅显示提示，提示面板默认由html绘制，可以通过css进行样式调整，因此要包裹在div中

   <div id="charts"></div>
   let options = {
       series:[{
         name: 'bird',
         type: 'line',
         data: [10, 20, 30, 40, 70]
       },{
         name: 'cat',
         type: 'line',
         data: [15, 10, 20, 50, 20]
       }],
       tooltip:{},
       legend:{},

       xAxis:{
         data: [1,2,3,4,5]
       },
       yAxis:{
         // data: [1,2,3,4,5]
       }
     }

配置项

• content 提示面板部分
• axisPointer 坐标交汇点

  tooltip: {
      renderMod: 'richText', // 富文本功能，可以使用canvas绘制提示框
      triggerOn: 'click', //鼠标点击才会触发
      trigger:'axis', // 不用靠近点，x坐标对齐就能触发
      backgroundColor:'',
      textStyle:'',
      border:'',
      formatter:'{b0}: {c0}<br />{b1}: {c1}'
  },

axis

类型

• Value：值类型（20，30）
• Category：类目轴（Sunday、 Monday）
• time：时间轴
• log：对数轴

⚠️如果将type值设置为'value'，那么即使有设置data，也会自动计算。 如果想要 x 轴显示特定的刻度值，你应该将 x 轴的 type 设置为 'category' 并提供一个 data 数组。

配置项

• ticket：刻度
• label：每个刻度名字
• line：坐标轴线
• name：单位

未完待续...

附一个动态更新排序的小demo：