echarts 绘制地铁线路

series: [
            {
                type: "graph",
                layout: "none",
                symbolSize: 14,
                roam: true,
                label: {
                    distance: 8,
                    show: true,
                    fontSize: 10,
                },
                scaleLimit: {
                    min:1.2,
                    max: 2,
                },
                // edgeSymbolSize: [4, 8],
                itemStyle: {
                    borderColor: "rgba(0,0,0,.9)",
                    borderWidth: 2,
                    color: "#ffffff",
                },
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 10,
                        },
                    },
                },
                data: [],
                links: [],

                lineStyle: {
                    width: 0.8,
                    normal: {
                        opacity: 1,
                        width: 1,
                        curveness: 0,
                    },
                },
            },
        ],

参考:echarts图表集

实现效果如图:

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮助你在Vue框架中使用Echarts绘制天津地铁线路。您可以使用Vue-ECharts库来将Echarts集成到Vue应用程序中。以下是绘制天津地铁线路的基本步骤: 1.安装Vue-Echarts库。用下面的命令进行安装: npm install vue-echarts echarts --save 2.在需要使用线路的Vue组件中导入ECharts库和Vue-ECharts库,如下所示: import echarts from 'echarts' import ECharts from 'vue-echarts/components/ECharts.vue' import 'echarts/map/js/province/tianjin' import 'echarts/extension/bmap/bmap' 3.在Vue的template中添加组件并设定组件的属性。例如,您可以设置组件的宽度和高度,并在options属性中传递ECharts配置选项,如下所示: <ECharts :options="options" style="height: 500px; width: 100%;"></ECharts> 4.在Vue的script中添加options数据。在options数据中,您可以指定表的类型,设置地背景颜色和缩放以及添加地铁线路数据。例如: export default { components: { 'v-chart': ECharts // ECharts组件名称“v-chart” }, data () { return { options: { title: { text: '天津地铁线路', subtext: '仅供参考', left: 'center' }, tooltip: { trigger: 'item' }, bmap: { center: [117.205914, 39.090908], zoom: 13, roam: true, mapStyle: { styleJson: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'land', 'elementType': 'all', 'stylers': { 'color': '#f3f3f3' } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'color': '#fdfdfd' } }, { 'featureType': 'highway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'poi', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'local', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'label', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#999999' } }] } }, series: [ { type: 'lines', coordinateSystem: 'bmap', polyline: true, data: [ [{name: '蓟县', coord: [117.460525,40.035233]}, {name: '蔡家沟', coord: [117.680501,39.055405]}], [{name: '蔡家沟', coord: [117.680501,39.055405]}, {name: '天津南站', coord: [117.131276,39.1091243]}], ... ], silent: true, lineStyle: { normal: { width: 1, opacity: 0.2, curveness: 0.2, color: '#0074D9' } }, progressiveThreshold: 500, progressive: 200 }, { type: 'effectScatter', coordinateSystem: 'bmap', data: [ {name: '天津站', coord: [117.218782, 39.140717]}, {name: '塘沽站', coord: [117.655043, 39.032448]}, ... ], symbolSize: function (val) { return val[2] / 8; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#0074D9' } } }, ... ] } }; } } 这是一个简单的天津地铁线路,您可以根据自己的需要进行修改。如果您需要添加更多属性或样式,可以查看官方文档进行进一步学习。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值