Vue中使用echarts绘制地图，以及只显示南海问题

最新推荐文章于 2023-12-10 19:48:19 发布

weixin_34121282

最新推荐文章于 2023-12-10 19:48:19 发布

阅读量1.4k

点赞数

文章标签： javascript json 大数据 ViewUI

原文链接：https://juejin.im/post/5c9c94b0e51d45381b03ed70

版权

下载echarts依赖

下载依赖我想大家都会：
    cnpm / npm install echarts
    yar add echarts
typescript项目
npm install @types/echarts
复制代码

引入

在main.js中引入
import Echarts  form 'echarts'
Vue.prototype.$echarts = Echarts
复制代码

在组件中使用

mounted () {
    this.drawChinaMap();
},
methods: {
    drawChinaMap () {
        let myCharts = document.getElementById('chinaMap');
        let options = {
            title: {
                text: 'iphone销量',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['iphone3', 'iphone4', 'iphone5']
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: