Como usar echarts no projeto vue3

Instalar

npm install --save echarts

main.js apresenta echarts:

// 引入 echarts
import * as echarts from "echarts";
const app = createApp(App);
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts;

Defina um contêiner dom na tag do modelo

Nota: Você precisa usar importar * como echarts de 'echarts', mas não pode usar importar echarts de 'echarts', caso contrário, um erro será relatado.

<script>
  import { defineComponent, toRefs, reactive, onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  export default defineComponent({
    name: 'Histogram',
    setup() {
      const state = reactive({
        option: {
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ["芳草地国际","实验小学","白家庄小学","外国语小学","师范学校附属","望京东园"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '学校',
              type: 'bar',
              barWidth: '40%',
              data: [260,680,360,460,150,320],
            },
          ],
        },
      })
      const initeCharts = () => {
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption(state.option)
      }
      
      onMounted(() => {
        initeCharts()
      })

      return {
        ...toRefs(state),
      }
    },
  })
</script>

Observação: descobri que parte do conteúdo de texto de alguns gráficos de colunas não foi exibido. Imaginei que o motivo pelo qual não foi exibido era porque o texto era muito longo. Aconteceu que os caracteres no eixo X no protótipo precisavam ser inclinados Existe um axisLabel no documento de consulta xAxis que pode ser configurado.

xAxis define inclinação da fonte

xAxis: [
  {
    type: 'category',
    data: [ "芳草地国际", "实验小学", "白家庄小学", "外国语小学", "师范学校附属", "望京东园" ],
    axisTick: { alignWithLabel: true },
    axisLabel: { interval: 0, rotate: 30 },
  },
],

Este atributo de itemStyle em série pode definir o estilo, definir a cor do gradiente por meio de cor e definir os cantos arredondados por meio de barBorderRadius

série: [
{ nome: '学校', tipo: 'bar', barWidth: '40%', itemStyle: { cor: novo VabChart.graphic.LinearGradient (0, 0, 0, 1, [ { deslocamento: 0, cor : '#9a9cf6' }, { deslocamento: 1, cor: '#6365ef' }, ]), barBorderRadius: [5, 5, 0, 0], }, dados: [260.680.360.460.150.320], }, ],

Adicionar evento de clique

O documento mostra que eventos de clique podem ser adicionados através de

constiniteCharts = () => { let myChart = echarts.init(document.getElementById('myChart')) // Desenha o gráfico myChart.setOption(state.option) myChart.on('click', (params) => { console .log(params) // tarefas }) } Depois que o evento for adicionado com sucesso, clicar no gráfico do echarts será iniciado várias vezes e imprimirá muitos resultados.

Use off para fechar antes do evento de clique

const initeCharts = () => { let myChart = echarts.init(document.getElementById('myChart')) // Definir myChart.setOption(state.option) myChart.off('click') myChart.on('click ', (params) => { console.log(params) // tarefas }) }

Após adicioná-lo, os dados são impressos apenas uma vez, e você pode fazer o que quiser no evento click.

Crie um novo arquivo js com um nome aleatório, aqui chamado echarts.js, e coloque-o especificamente na pasta js.

Conteúdo que deve estar presente na pasta echarts.js:

//Apresentamos o módulo principal do echarts, que fornece as interfaces necessárias para o uso dos echarts.
import * as echarts from "echarts/core";

/** Introduzir gráfico de barras e gráfico de linhas, o sufixo do gráfico é Chart */
import { BarChart, LineChart } from "echarts/charts";

// Introduzir caixa de prompt, título , Sistema de coordenadas cartesianas, conjunto de dados, componente conversor de dados integrado, o sufixo do componente é Component
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, } from "echarts/components"; // Layout automático do rótulo, transição global animação e outros recursos import { LabelLayout, UniversalTransition } from "echarts/features"; // Apresente o renderizador Canvas. Observe que a introdução do CanvasRenderer ou SVGRenderer é uma etapa necessária. import { CanvasRenderer } from "echarts/renderers"; // Registre o componentes necessários echarts.

TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LineChart,
]);

//
exporta echarts padrão;

Insira o arquivo echarts.js criado no main.js global:

importar aplicativo de './App'
//Introduzir echarts
importar echarts de './common/js/echarts.js'

importar {createSSRApp} de 'vue'
let app = createSSRApp(App)

//Montar na instância vue
// Vue.prototype.$echarts = echarts;//método de montagem vue2
app.config.globalProperties.$echarts = echarts;//método de montagem vue3

export function createApp() { return {app} } //Chamado A hora é: esta. $echarts.init()

Como usar echarts no projeto vue3

Acho que você gosta